Как центрировать этот элемент

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

Прежде всего, если вы хотите, чтобы отцентрировать DIV с 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

Try добавив некоторые 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 означает, что вы должны выполнить вручную вручную. вставьте это в или файл css под #mydiv. для этого измените свой 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%); 
} 

Надежда работает :)