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

尝试添加一些CSS代码

＆＃13;

#mydiv{

text-align:center
}

＆＃13;

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

＆＃13;

Answer 2

如果您使用以下其中一项，您可以使用它来居中它50％将放置文本或输入框的开头。 px意味着您必须手动操作。将此插入到#mydiv下的css文件中。这样做会将你的身份改为mydiv或其他。

left:50px;
left:50%

Answer 3

首先，如果你想将div设为id =＆＃39; 1＆＃39;，它需要一个父元素 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 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%);
}

希望是有效的：）

如何使这个元素居中

4 个答案: