如何使此元素居中

How to center this element

本文关键字：元素 何使此      更新时间：2023-09-26
<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>

目前，它出现在屏幕的左侧。请看一看。谢谢。

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

首先，如果你想用id='1'居中div，它需要一个父元素.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/了解有关弹性框 https://css-tricks.com/snippets/css/a-guide-to-flexbox/的更多信息

如果您使用以下方法之一，则可以使用它将其居中 50% 将放置文本或输入框的开头。 PX表示您必须手动排列。 将其插入 或 CSS 文件下 #mydiv. 为此，请将您的 ID 更改为 Mydiv 或其他内容。

left:50px;
left:50%

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

希望是作品:)

相关文章：