[英]how to keep floated item centered within container
OK, I've gotten the prelim version of my page started, but I'm having a problem with two floated div's that are wrap in header tag. 好的,我已经开始了页面的预备版本,但是我遇到了两个浮于头标中的div浮动的问题。 Basically, I want the two rectangles to center within the containing div tag.
基本上,我希望两个矩形位于包含div标签的中心。 One of the rectangles overlaps the other.
矩形之一与另一矩形重叠。 I had to us positioning to be able to expand them within the container other-wise the second would jump below the first.
我必须对我们进行定位,以便能够在容器内扩展它们,否则第二个将跳到第一个之下。
Here's what I've have so far. 这是我到目前为止所拥有的。
<div id="div1" class="fluid">
<header id="headGraphics">
<div id="headRectangle1">This will be an image.</div>
<div id="headRectangle2">"This will be text adjusted using opacity."
</div>
Here is the css for the page - I have a follow-up question after we get this solved. 这是页面的CSS-解决此问题后,我还有一个后续问题。
.gridContainer.clearfix #headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;
}
.gridContainer.clearfix #headGraphics #headRectangle1 {
float: left;
width: 350px;
height: 75px;
position: relative;
border: medium solid #000000;
-webkit-box-shadow: 3px 3px 3px 1px #FF7878;
box-shadow: 3px 3px 3px 1px #FF7878;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.gridContainer.clearfix #headGraphics #headRectangle2 {
background-color: #FFAAAA;
float: left;
/*margin-right: 50px;*/
width: 350px;
height: 75px;
position: relative;
top: -50px;
right: 0px;
text-align: center;
clear: both;
left: 100px;
margin-left: auto;
margin-right: auto;
display: block;
}
.gridContainer.clearfix #headGraphics:after {
content: " ";
display: table;
clear: both;
}
I can't remove the position tags because they give me the layout that I'm am trying to accomplish. 我无法删除位置标签,因为它们为我提供了我要完成的布局。
let me clear a few things up... and before I go any further, most of my (98%) selectors are in the boiler plate template. 让我先整理一下...然后再进行下一步,大部分(98%)选择器都位于样板模板中。 That being said, here the computed effects per selector:
话虽如此,这里每个选择器的计算效果:
.gridContainer.clearfix #headGraphics; .gridContainer.clearfix #headGraphics; width 950px, margin 0 auto, font-family monotype weight 800px size 20px, text-align center.
宽度950像素,页边距0自动,字体系列单字型粗细800像素大小20像素,文本对齐中心。 .gridContainer.clearfix #headGraphics #headRectangle1;
.gridContainer.clearfix #headGraphics#headRectangle1; width 350px, height 75px, display inline-block, margin rt & lft auto, position relative, box-shadow (which isn't working properly) .gridContainer.clearfix #headGraphics #headRectangle2 width 350px, height 75px, display inline-block, position relative, top -50px, rt 0px, bot 0px, left 100px (this is to bring object up and offset from rectangle), float left, clear both, text-aligh center.
宽度350px,高度75px,显示行内块,空白rt和lft自动,相对位置,框阴影(无法正常工作).gridContainer.clearfix #headGraphics#headRectangle2宽度350px,高度75px,显示行内块,相对位置,顶部-50px,rt 0px,bot 0px,左100px(这是使对象向上移动并偏离矩形),向左浮动,都清除,文本高度居中。
I would suggest removing the float attributes from both, then just setting both items display as inline-block, you will need to specify width and height on both cases, then apply text-align center to the parent, that will allow the child to be centered to the parents available area. 我建议从两者中都删除float属性,然后将两个项目都设置为inline-block,在这两种情况下都需要指定宽度和高度,然后将文本对齐中心应用于父对象,这将使子对象成为以家长可用区域为中心。
The Display: inline-block will give the two elements the possibility to behave not just like a block element, it will be both, block and inline, so you will be able to use attributes for both at the same time. Display:inline-block将使这两个元素不仅具有类似于block元素的功能,而且具有block和inline的功能,因此您将能够同时使用这两个属性。
If you need an example, I can provide you with one, Just let me know! 如果您需要一个示例,我可以为您提供一个示例,请告诉我!
EDIT... 编辑...
Here is a working example 这是一个有效的例子
My JSFiddle 我的JSFiddle
http://jsfiddle.net/dq185dw9/ http://jsfiddle.net/dq185dw9/
My CSS 我的CSS
#headGraphics {
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
font-family: "monotype corsiva";
font-size: 20px;
font-weight: 800;
width: 950px;
text-align: center;
outline: red dashed 1px;
padding: 35px; /* remove or change if needed */
}
#headGraphics [id*="headRectangle"] {
width: 350px;
height: 75px;
position: relative;
border: medium solid #000000;
-webkit-box-shadow: 3px 3px 3px 1px #FF7878;
box-shadow: 3px 3px 3px 1px #FF7878;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box;
margin: 0px 25px;
line-height: 75px; /* remove or change if you want to have more than one line of text */
}
My HTML 我的HTML
<header id="headGraphics">
<div id="headRectangle1">This will be an image.</div>
<div id="headRectangle2">"This will be text adjusted using opacity.</div>
</header>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.