Question

我看到有人说不要使用$anchors = $selector>query("/html/body//div[@class='media']//div/h4//a");和<div align="center">Some Text</div>，因为它已经过时但我找不到任何CSS来对齐元素中的所有内容。我发现它最接近的是<center>Some Text</center>，但这只是对齐文本而不是元素。有没有允许你对齐元素的CSS？

这是CSS。我想要集中的是text-align: center;。它是#editor标记。

<textarea></textarea>

Answer 1

要将框水平居中，您需要为其指定明确的宽度，然后将其边距设置为＆＃34; 0 auto＆＃34;：

＆＃13;

.container{
    border:solid 2px lightblue;
    width:600px;
    height:400px;
}

.center{
    border:solid 2px red;
    height:200px;

    /*centering CSS*/
    width:200px;
    margin:0 auto;
}

＆＃13;

<div class="container">
    <div class="center">
        This box is centereed
    </div>
</div>

＆＃13;

你也可以通过给它的父容器一个文本对齐值中心并使其显示来水平对齐一个框：inline：

＆＃13;

.container{
    border:solid 2px lightblue;
    width:600px;
    height:400px;
    text-align:center;
}

.center{
    border:solid 2px red;
    width:200px;
    height:200px;
  
    /*Centering CSS*/
    display:inline;
    text-align:center;
}

＆＃13;

<div class="container">
    <div class="center">
        This box is centereed
    </div>
</div>

＆＃13;

最后，您可以使用flexbox在其父级中水平对齐块容器：

＆＃13;

.container{
    border:solid 2px lightblue;
    width:600px;
    height:400px;
	
    /*Centering CSS*/
    display:flex;
    justify-content:center;
}

.center{
    border:solid 2px red;
    width:200px;
    height:200px;
}

＆＃13;

<div class="container">
    <div class="center">
        This box is centereed
    </div>
</div>

＆＃13;

Answer 2

您可以在此处使用css flexbox进行垂直和水平定位

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

.flex-container {
     display: -webkit-flex;
     display: flex;
     width: 450px;
     height: 250px;
     background-color: lightgrey;
     justify-content: center;
     text-align: center;
     align-items: center;
}

.flex-item {
      background-color: cornflowerblue;
      width: 100px;
     height: 100px;
     margin: 10px;
}

＆＃13;

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
   <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>

＆＃13;

是否有任何CSS来对齐盒子/元素？

2 个答案: