我的问题与我有关

时间：2016-04-19 14:05:47

标签： html css width margin responsive

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

<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

4 个答案:

答案 0 :(得分：0)

你可以尝试使用这样的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-->

答案 1 :(得分：0)

如果您不想为主框指定宽度，可以使用text-align属性：

text-align:center;

这是一个带有一个小演示的小提琴：https://jsfiddle.net/valentinho14/cst30wuc/

答案 2 :(得分：0)

尝试使用名为#box的div而不是在页面的中心，将另一个div放在＃box1中并将第二个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。小心。

答案 3 :(得分：0)

问题是图像的容器本身确实居中，但图像对齐到该容器的左侧。如果您为#box提供了不同的背景颜色，则可以立即看到。

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

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

看看这个小提琴：https://jsfiddle.net/abvt8ekj/

和片段：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题