Question

我无法将CSS中的某个部分集中在一起。如果您需要更多信息，请告诉我们。

我已经尝试text-align: center;

CSS代码：

    #example{
        margin: auto;
        max-width: 1000px; 
}

HTML

<section id="example"> 
        <br>
        <hr>
        <div class="icon">
            <img src="Other/icon.png">
            New icon
        </div>

        <hr>
        <br>

        <a href="http://google.com" id="example">
                 <div class="box">
                        <div class="boximg" >
                                <img src="./alt/logo.png">
                        </div>  
                            <div class="text">
                        <p>Logo</p>
                        </div>  
                </div>
            </a>   
</section>

我希望有人可以提供帮助。

Answer 1

我建议将该部分包含在<main>标记内并应用以下CSS：

main {
    display: flex;
    justify-content: center;
}

这将使该部分居中，但当然您可能已经拥有<main>标签，并且不想将页面的主要部分转换为弹性框。在这种情况下，您可以将flexbox CSS应用于<section>，然后将所有部分内容包装在div中。

以下是主标记为弹性框的示例： https://jsfiddle.net/mywtec07/

以下是一个示例，其中该部分为flexbox，div包含所有内容： https://jsfiddle.net/6898txaL/1/

或者，您可以将该部分居中，而无需添加任何额外的HTML。只需应用以下CSS：

#example {
    display: block;
    margin: 0 auto;
    width: 300px;
    text-align: center;
}

您可以在此处查看示例： https://jsfiddle.net/qxeppj62/1/

Answer 2

＆＃13;

      #example{
        max-width: 1000px; 
      }

      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);	
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */							
      }
      
      .center-text {
        text-align: center;
      }

＆＃13;

<section id="example" class="center">
  <hr>
  <div class="icon">
    <img src="Other/icon.png">New icon
  </div>
  <hr>
  <a href="http://google.com">
    <div class="center-text">
      <div class="boximg" >
        <img src="./alt/logo.png">
      </div>  
      <div class="text">
        <p>Logo</p>
      </div>  
    </div>
  </a>   
</section>

＆＃13;

无法居中CSS中的一个部分

2 个答案: