如何居中此元素

-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

如何居中此元素

回答

相關問題