我的 css 有问题

Question

我目前有 4 个小部件有自己的尺寸。我将它们放在一个名为 #box 的主要 div 中，我通过将宽度减小到大约 60% 并在自动上左右留出边距来使它们居中。如果我在浏览器中缩小，小部件块会向左移动更多并且不会保持居中。

<div id="Box"><!--Start Div Box-->
            
            <div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
   <ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
   <li id="phnjh3wZ" class="Yi5zwOy1yHP">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor" 
            class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
            
       
      <div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
   <ul id="FVuBAHp" class="TA_links CPqPZ6">
   <li id="dYmcZAj7eGOi" class="FKHiRxci">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>  
            
    
      
      <div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
   <ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
   <li id="R3Oc1SU8Y" class="bXEYi56LVvek">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
    
      
      <div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
   <ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
   <li id="LKMj2Zk" class="Z16i8koQq">
   <a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
    
    </div><!--End Div Box-->

#Box
{
 background-color:#CCCCCC;
 width:60%;
 margin-left:auto;
 margin-right:auto;
 
}

Image before zooming browser out

Image after zooming out

Answer 1

你可以尝试像这样用 flexbox 做它，它总是在中心！如果你不想要 list-style-type 不要忘记把 padding-left:0px; 放到 ul 中，因为默认情况下有一个 padding :40px;

#Box{
  display:flex;
  justify-content:center;
}

<div id="Box"><!--Start Div Box-->
            
            <div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
   <ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
   <li id="phnjh3wZ" class="Yi5zwOy1yHP">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor" 
            class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
            
       
      <div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
   <ul id="FVuBAHp" class="TA_links CPqPZ6">
   <li id="dYmcZAj7eGOi" class="FKHiRxci">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>  
            
    
      
      <div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
   <ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
   <li id="R3Oc1SU8Y" class="bXEYi56LVvek">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
    
      
      <div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
   <ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
   <li id="LKMj2Zk" class="Z16i8koQq">
   <a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
    
    </div><!--End Div Box-->

Answer 2

如果您不想指定主框的宽度，可以使用文本对齐属性 :

text-align:center;

这是一个 Fiddle 的小演示：https://jsfiddle.net/valentinho14/cst30wuc/

Answer 3

尝试在页面中央放置另一个 div 而不是使用名为 #box 的 div 并将第二个 div 放在中央。

示例：

    <!DOCTYPE html>
<html>
    <head>
        <style>
        #box1{
        background-color:black;

        }

        #box2{
        margin:auto;
        background-color:green;
        width:50px;
        height:50px;
        display:block;
        align:center;
        }
        </style>
    </head>
        <body>

        <div id = "box1">
            <div id = "box2"></div>
        </div>

        </body>
</html>

我这样做了，即使您放大或缩小，div 也会留在中间。只需将图像放入第二个 div。保重。

Answer 4

问题是您的图像容器本身确实居中，但图像与该容器的左侧对齐。如果您给 #box 不同的背景颜色，您会立即看到。

尝试给 #Box 元素一个中心，然后将内部元素也居中。

由于您使用的是 <div> 元素，我会选择 float: left 并为每个元素指定特定的 width 属性。我宁愿使用 inline-block 元素，因为它更容易居中，并且因为您只有自然 inline-block 的图像，但这不是您实现的。

看看这个 fiddle：https://jsfiddle.net/abvt8ekj/

和片段：

.container {
  background-color: #ee55cc;
}

#Box{
  background-color:#CCCCCC;
 width:60%;
 margin-left:auto;
 margin-right:auto;
}
#Box:after {
  display: block;
  content: "";
  clear: both;
}
.Certificate {
  width: 25%;
  float: left;
  overflow: hidden;
}
.Certificate ul,
.Certificate li {
  margin: 0;
  padding: 0;
}

<div class="container">
<div id="Box"><!--Start Div Box-->
            
            <div id="TA_certificateOfExcellence580" class="Certificate Certificate-one">
   <ul id="Lnnr78SGL0" class="TA_links 4fJwNUzU0uDT">
   <li id="phnjh3wZ" class="Yi5zwOy1yHP">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor" 
            class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
            
       
      <div id="TA_certificateOfExcellence654" class="Certificate Certificate-two">
   <ul id="FVuBAHp" class="TA_links CPqPZ6">
   <li id="dYmcZAj7eGOi" class="FKHiRxci">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>  
            
    
      
      <div id="TA_certificateOfExcellence588" class="Certificate Certificate-three">
   <ul id="E4oUIOq5y" class="TA_links JWgIqGH4nEMg">
   <li id="R3Oc1SU8Y" class="bXEYi56LVvek">
   <a target="_blank" href="https://www.tripadvisor.co.za">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2014_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
    
      
      <div id="TA_certificateOfExcellence396" class="Certificate Certificate-four-last">
   <ul id="ENh9NKezEOIt" class="TA_links j9dirUfR">
   <li id="LKMj2Zk" class="Z16i8koQq">
   <a target="_blank" href="https://www.tripadvisor.co.za/Attraction_Review-g312578-d2284717-Reviews-Felleng_Day_Tours-Johannesburg_Greater_Johannesburg_Gauteng.html">
            <img src="https://www.tripadvisor.co.za/img/cdsi/img2/awards/CoE2015_WidgetAsset-14348-2.png" alt="TripAdvisor"
             class="widCOEImg" /></a>
   </li>
   </ul>
   </div>
            
    
    </div><!--End Div Box-->
    </div>

我的 css 有问题

I have issue with my css

html

css

margin

width

responsive