Question

我有一个小箭头，我想将其放到div的中间，使其看起来像轮播/幻灯片控件，例如下一个按钮或上一个按钮。无论是否有引导程序，我似乎都无法使其正常运行。

我想念什么？它是更大结构的一部分，也许这就是为什么？

这是HTML：

.III{
    height:800px;
    width:100%;
    padding:0;
    margin-top:50px;
    margin-bottom:50px;
    position:relative;
 }
.semn{
    background-color: blue;
    height:90px;
    width:90px;
    border-radius:90px;
    margin:0 auto;
    display: inline-block; 
    text-align: center; 
}
.sagetica{
    display: inline-block; 
    text-align: center;
    margin:0 auto; 
}

 <div class="row">
   	<div class="III container-fluid col-md-12">
   		<div class="container-fluid">
		   <div class="row align-items-center align-self-center ">		
          <div class="stanga col-md-2 text-center ">
             <div class="semn">
              <p class='sagetica'> &lt; </p>
             </div>
          </div>
         </div>
       </div>
    </div>
 </div>

Answer 1

您可以使用flexbox解决此问题。只需将display flex属性应用于圆形div并集中对齐项目即可。

    .semn{
background-color: blue;
height:90px;
width:90px;
border-radius:90px;
margin:0 auto;
display: flex;
align-items: center; 
text-align: center; 
}

Answer 2

具有.semn类的元素具有display: inline-block;属性。因此，text-align: center属性不起作用。尝试删除它。

结果

.III {
  height: 800px;
  width: 100%;
  padding: 0;
  margin-top: 50px;
  margin-bottom: 50px;
  position: relative;
}

.semn {
  background-color: blue;
  height: 90px;
  width: 90px;
  border-radius: 90px;
  margin: 0 auto;
  /* display: inline-block; */
  text-align: center;
}

.sagetica {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}

<div class="row">
  <div class="III container-fluid col-md-12">
    <div class="container-fluid">
      <div class="row align-items-center align-self-center ">
        <div class="stanga col-md-2 text-center ">
          <div class="semn">
            <p class='sagetica'>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

请尝试使用引导程序4

<div class="row">
    <div class="col-12">
        <p class="mx-auto d-block "> > </p>
    </div>
</div>

无法在div的中间居中

3 个答案: