如何居中此元素

Question

<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> 

此刻，它显示在屏幕的左侧。请看一看。谢谢。

Answer 1

首先，如果你想中心与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/

Answer 2

尝试加入一些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>

Answer 3

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

left:50px; 
 
left:50%

Answer 4

我已将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%); 
} 

希望是作品:)