如何居中此元素

-2

<div id="1" style="display:block"> 
<div class="radio"> 
     <label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label> 
</div> 
<div class="radio"> 
     <label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label> 
</div> 
<div class="radio"> 
     <label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label> 
</div> 
<div class="radio"> 
     <label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label> 
</div> 
</div>

此刻，它显示在屏幕的左侧。请看一看。谢谢。如何居中此元素

来源

2016-01-22 Kevin Raj

你的意思是什么“此元素”... – HJerem

另外，数字标识无效（编辑：在H TML 4） –

首先，如果你想中心与ID = '1' 的股利，它需要一个父元素 HTML

<div id='parent'> 
    <div id="myDiv" style="display:block"> 
    <div class="radio"> 
     <label> 
     <input type="radio" name="o1"> 
     <input type="text" class="form-control" id="opt1"> 
     </label> 
    </div> 
    <div class="radio"> 
     <label> 
     <input type="radio" name="o2"> 
     <input type="text" class="form-control" id="opt2"> 
     </label> 
    </div> 
    <div class="radio"> 
     <label> 
     <input type="radio" name="o3"> 
     <input type="text" class="form-control" id="opt3"> 
     </label> 
    </div> 
    <div class="radio"> 
     <label> 
     <input type="radio" name="o4"> 
     <input type="text" class="form-control" id="opt4"> 
     </label> 
    </div> 
    </div> 
</div>

CSS

#parent { 
    display: flex; 
    justify-content: center; 
}

jsfiddle https://jsfiddle.net/g8oLjnus/ 了解有关Flexbox的更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/

来源

2016-01-22 13:51:40 Slaaavo

尝试加入一些CSS代码

#mydiv{ 
 

 
text-align:center 
 
}

<div id="mydiv"> 
 
<div class="radio"> 
 
     <label><input type="radio" name="o1"><input type="text" class="form-control" id="opt1"></label> 
 
</div> 
 
<div class="radio"> 
 
     <label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label> 
 
</div> 
 
<div class="radio"> 
 
     <label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label> 
 
</div> 
 
<div class="radio"> 
 
     <label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label> 
 
</div> 
 
</div>

来源

2016-01-22 12:59:30

downvoter，你能发表评论吗？或者你不知道该说些什么？ –

它不起作用[Luis]（http://stackoverflow.com/users/3750462/luis-gonz%c3%a1lez） –

你运行了代码片段吗？该元素看起来居中，你想得到什么？ –

，如果您使用以下步骤之一，你可以用它来居中的50％将用于将文本或输入框的开始。 px意味着你必须手动配对。将此插入或#mydiv下的css文件中。做到这一点改变你的ID到mydiv或其他东西。

left:50px; 
 
left:50%

来源

2016-01-22 13:08:19 Jack

我已将id更改为myid;并增加了一个父div

<div class="parent">  
<div id="myid" style="display:block"> 
    <div class="radio"> 
     <label><input type="radio" name="o1"> <input type="text" class="form- control" id="opt1"></label> 
</div> 
<div class="radio"> 
     <label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label> 
</div> 
<div class="radio"> 
     <label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label> 
</div> 
<div class="radio"> 
     <label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label> 
</div> 
</div> 
</div>

的.parent类必须是：

.parent{position: relative;}

而且#myid必须

#myid{ 
position: absolute; 
left: 50%; 
transform: translateX(-50%); 
}

希望是作品:)

来源

2016-01-22 14:04:35

如何居中此元素

回答

相关问题