如何居中相对div？ [英] How to center a relative div?

问题描述

我一直在努力使以下代码工作数小时，但没有成功...能否请您帮助我使项目div居中（即使在页面放大和缩小时也是如此）？

这是我的HTML& CSS：

< pre class = snippet-code-css lang-css prettyprint-override> #bottom {位置：绝对；最高：100％；左：0；正确：0； background-color：#FFF;} #secondsection {background-size：100％auto;背景尺寸：封面；颜色：＃eaeaf0;左边距：7％；边际权利：7％； padding-top：35像素； padding-bottom：35px;位置：相对；}＃ss_top {宽度：100％； height：100％;}。ss_title {display：inline;向左飘浮;颜色：＃000000;字体系列： Eurostile；字体大小：35px；文本转换：大写；}。ss_title2 {颜色：＃a5a5a5；}＃画廊按钮{位置：相对；显示：内联；浮动：正确；右边距：0％；边距顶部：50像素;填充：20px;背景颜色：＃000；文字修饰：无；边界：无；颜色：#FFF；文本转换：大写；}＃projects {位置：相对；左边距：自动；右边距：自动；最大宽度：2000px；填充：175px 0px 0px 0px;}＃pr_one，＃pr_two {display：block;}。pr_img {float：left;显示：内联；保证金权利：1％；底边距：1％；}＃viewprofilebutton {位置：相对；左：-75px;左边距：50％；利润率最高：3.5％;底边利润率：2.5％;填充：20px;背景颜色：＃000；文字修饰：无；边界：无；颜色：#FFF；文本转换：大写；}

 < div id = 第二部分> < div id = ss_top> < p class = ss_title>选择的项目< br />< span class = ss_title2>最近我在< / span>< / p> < button type = button id = gallerybutton>查看所有内容< / button> < / div> < div id = projects> < div id = pr_one> < div class = pr_img>< a target = _ blank href =>< img src = images / pr_nfs.jpg alt = width = 488px height = 272px < / a>< / div> < div class = pr_img>< a target = _ blank href =>< img src = images / pr_nfs.jpg alt = width = 488px height = 272px < / a>< / div> < div class = pr_img>< a target = _ blank href =>< img src = images / pr_nfs.jpg alt = width = 488px height = 272px < / a>< / div> < / div> < div id = pr_two> < div class = pr_img>< a target = _ blank href =>< img src = images / pr_nfs.jpg alt = width = 488px height = 272px < / a>< / div> < div class = pr_img>< a target = _ blank href =>< img src = images / pr_nfs.jpg alt = width = 488px height = 272px < / a>< / div> < div class = pr_img>< a target = _ blank href =>< img src = images / pr_nfs.jpg alt = width = 488px height = 272px < / a>< / div> < / div> < / div> < a href =＃thirdsection>< button type = button id = viewprofilebutton>查看我的作品< / button>< / a>< / div>  

解决方案

这是一个开始。查看以下CSS：

  #bottom {
 position：absolute; 
最高：100％；剩余
：0； 
右：0； 
 background-color：#FFF;} 
 
 #secondsection {
 background-size：100％auto; 
 background-size：封面； 
颜色：＃eaeaf0; 
剩余保证金：7％； 
保证金权利：7％； 
 padding-top：35像素； 
 padding-bottom：35px; 
职位：相对； 
边框：1像素用红色点缀； 
} 
 
 #ss_top {
宽度：100％； 
身高：100％； 
边框：1像素点缀为蓝色； 
溢出：自动； 
} 
 #ss_top p {
保证金：0; 
} 
 
 .ss_title {
 display：inline-block; 
颜色：＃000000; 
字体家族：欧洲； 
 font-size：35px; 
文本转换：大写；} 
 
 .ss_title2 {
颜色：＃a5a5a5;} 
 
 #gallerybutton {
位置：相对; 
显示：内联； 
 float：正确； 
保证金权利：0％； 
 margin-top：50px; 
 padding：20px; 
 background-color：＃000; 
文字修饰：无； 
边界：无； 
颜色：#FFF; 
 text-transform：大写；} 
 
 #projects {
职位：相对； 
 margin-left：auto; 
 margin-right：auto; 
最大宽度：2000像素； 
填充：175px 0px 0px 0px; 
边框：1px蓝色虚线； 
} 
 
 #pr_one，#pr_two {
 display：block; 
边框：2px蓝色虚线； 
溢出：自动； 
 text-align：center; 
} 
 
 .pr_img {
 display：inline-block; 
宽度：30％； 
保证金权：1％； 
底边保证金：1％； 
} 
 .pr_img img {
 display：inline-block; 
宽度：100％； 
高度：自动； 
} 
 
 #viewprofilebutton {
位置：相对；还剩
：-75像素； 
余量：50％； 
最高保证金：3.5％； 
底部保证金：2.5％； 
 padding：20px; 
 background-color：＃000; 
文字修饰：无； 
边界：无； 
颜色：#FFF; 
 text-transform：大写；} 
  

我首先摆脱了标题， #ss_top ，您不需要它。

对于 #projects 带有图像的面板，浮动框使您陷入
居中的麻烦。

在 #pr_one 和 #pr_two ，添加 text-align：center ，然后使用显示： .pr_img 上的内联块，这将使图像居中对齐（给定/留有一些空白），然后应用合适的宽度例如 30％，以便图像自动缩放以形成三行。

现在的诀窍是将 display：inline-block 应用于图像（ .pr_img img ），这样您
现在可以使用边距来控制顶部/底部/左侧/右侧的间距。

请参阅演示，网址为： http://jsfiddle.net/audetwebdesign/rmtpy6t0/

注意：，您还有一些工作要做，但至少可以澄清与居中和浮动元素有关的问题。

响应式设计：如果要根据屏幕尺寸连续显示2或3张图像，则需要了解媒体查询。但是，由于您将3张图像包装在 div 中，因此您被锁定为每行3张，但这可能没问题。

I have been trying to get the following code working for hours, without success... Could you please help me to get the projects div centered (even when the page is zoomed in and out)?

Here is my HTML & CSS:

#bottom {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: #FFF;}
	
#secondsection {
	background-size: 100% auto;
	background-size: cover;
	color: #eaeaf0;
	margin-left: 7%;
	margin-right: 7%;
	padding-top: 35px;
	padding-bottom: 35px;
	position: relative;}

#ss_top {
	width: 100%;
	height: 100%;}

.ss_title {
	display: inline;
	float:left;
	color: #000000;
	font-family: 'Eurostile';
	font-size: 35px;
	text-transform: uppercase;}

.ss_title2 {
	color: #a5a5a5;}

#gallerybutton {
	position: relative;
	display: inline;
	float: right;
	margin-right: 0%;
    margin-top: 50px;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

#projects {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 2000px;
	padding: 175px 0px 0px 0px;}

#pr_one, #pr_two {
	display: block;}

.pr_img {
	float: left;
	display: inline;
	margin-right: 1%;
	margin-bottom: 1%;}

#viewprofilebutton {
	position: relative;
    left: -75px;
    margin-left: 50%;
    margin-top: 3.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

<div id="secondsection">
					
	<div id="ss_top">
		<p class="ss_title">A selection of projects<br /><span class="ss_title2">I've worked on lately</span></p>
			<button type="button" id="gallerybutton">See everything</button>
	</div>

	<div id="projects">
	<div id="pr_one">
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
    	<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
        <div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
	</div>
	<div id="pr_two">
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
		<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
     	<div class="pr_img"><a target="_blank" href=""><img src="images/pr_nfs.jpg" alt="" width="488px" height="272px"></a></div>
	</div>
	</div>

	<a href="#thirdsection"><button type="button" id="viewprofilebutton">See my work</button></a>

</div>

解决方案

Here is a start. Look at the following CSS:

#bottom {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFF;}

#secondsection {
    background-size: 100% auto;
    background-size: cover;
    color: #eaeaf0;
    margin-left: 7%;
    margin-right: 7%;
    padding-top: 35px;
    padding-bottom: 35px;
    position: relative;
    border: 1px dotted red;
}

#ss_top {
    width: 100%;
    height: 100%;
    border: 1px dotted blue;
    overflow: auto;
}
#ss_top p {
    margin: 0;
}

.ss_title {
    display: inline-block;
    color: #000000;
    font-family: 'Eurostile';
    font-size: 35px;
    text-transform: uppercase;}

.ss_title2 {
    color: #a5a5a5;}

#gallerybutton {
    position: relative;
    display: inline;
    float: right;
    margin-right: 0%;
    margin-top: 50px;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

#projects {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
    padding: 175px 0px 0px 0px;
    border: 1px dashed blue;
}

#pr_one, #pr_two {
    display: block;
    border: 2px dashed blue;
    overflow: auto;
    text-align: center;
}

.pr_img {
    display: inline-block;
    width: 30%;
    margin-right: 1%;
    margin-bottom: 1%;
}
.pr_img img {
    display: inline-block;
    width: 100%;
    height: auto;
}

#viewprofilebutton {
    position: relative;
    left: -75px;
    margin-left: 50%;
    margin-top: 3.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

I started by getting rid of the floats in the title, #ss_top, you don't need it.

For the #projects panel with the images, floats are getting you into trouble with centering.

On #pr_one and #pr_two, add text-align: center and then use display: inline-block on .pr_img, this will center align your images (give/take some margins), and then apply a suitable width of say 30% so that the images auto scale to form a row of three.

The trick now is to apply display: inline-block to the images (.pr_img img) so you can now use margins to control top/bottom/left/right spacing.

See demo at: http://jsfiddle.net/audetwebdesign/rmtpy6t0/

Note: You still have some polishing up to do but at least this clarifies the issues related to centering and floated elements.

Responsive Design: If you want 2 or 3 images in a row depending on the screen size, you need to learn about media queries. However, because you wrapped 3 images in a div, you are locked into 3 per row, but that may be okay.

这篇关于如何居中相对div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！