为什么我的Div中心本身不在其父中心？ [英] Why won't my Div center itself in its parent?

问题描述

我正在为网站制作标题栏。此标题栏包含3个部分：后退按钮，学校信息和登录按钮。问题在于中心div（学校信息）将不会居中。我已经尝试了所有我知道该怎么做的方法，但没有任何效果。

这是我的HTML和CSS：

  / *-按钮栏-* /。buttonbarframe {width：100％;背景颜色：＃F1F1F1;边框底部：1像素实线＃D5D5D5;框阴影：1px 1px 2px＃D5D5D5;位置：固定左：0；正确：0；最高：0; / *高度：65像素； * /高度：45像素； padding：10px 0px 10px 0px;} / *＃buttonbar {width：100％;高度：45像素； padding：10px 0px 10px 0px;} * /。buttonbarspan {高度：100％;}。buttonbarspanindex {width：继承；高度：100％; margin：0px;}＃buttonbarschoolimage {display：block;向左飘浮;垂直对齐：中间；高度：44像素；边框：1像素，实心＃D5D5D5;}＃buttonbarschoolname {显示：块；填充：0px;页边距：4px；文字对齐：左；垂直对齐：中间； float：left;}。buttonbarrightbutton {display：block; float：right;}。buttonbarsycamorelogo {margin：0 auto;显示：块；文本对齐：居中；垂直对齐：中间； height：44px;}。schoolstuff {display：inline-block;保证金：0自动;文本对齐：居中；垂直对齐：中间；宽度：341像素；}。rightbutton {float：right;}。leftbutton {float：left;}  

 < div class ='buttonbarframe'> < div class =左键按钮栏> < a class ='backbutton btn btn-large btn-danger'href ='’>< i class ='icon-white icon-arrow-left'>< / i>注销< / a> < / div> < div class =学校的东西按钮栏> < img id ='buttonbarschoolimage'src ='/ Schools / $ EntityValue / logo'> < h2 id = buttonbarschoolname>三县学校< / h2> < / div> < div class =右键按钮栏范围> < input type ='submit'class ='buttonbarrightbutton btn btn-large btn-primary'href ='parentcheckin.php'value ='Login'> < / div>< / div>  

问题的示例。

问题的图片。 http://www.overclock.net/image/id/6330507/width/900/height/900/flags/LL

解决方案

在父div上放置 text-align：center 将解决此问题。您现在拥有的内容将在div中应已居中的文本居中。

请参阅： http://jsfiddle.net/AJmSw/

内联块元素的位置将基于父容器文本的对齐方式。

或者从

删除 display：inline-block 规则， center div将允许 margin：0 auto; 生效，并且还将div
居中，请参见： http://jsfiddle.net/b4mWU/

I am making a header bar for a website. This header bar consists of 3 parts: The Back Button, The School Information, and The Login Button. The problem is that the center div, the School Information, will not center itself. I've tried everything I know how to do and nothing works.

Here is my HTML and CSS:

/* -- Button Bar -- */

.buttonbarframe {
    width: 100%;
    background-color: #F1F1F1;
	border-bottom: 1px solid #D5D5D5;
	box-shadow: 1px 1px 2px #D5D5D5;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	/*height: 65px;*/
	height: 45px;
	
    padding: 10px 0px 10px 0px;
}

/*#buttonbar {
    width: 100%;
	height: 45px;
	padding: 10px 0px 10px 0px;
}*/

.buttonbarspan {
    height: 100%;
}

.buttonbarspanindex {
    width: inherit;
    height: 100%;
	margin: 0px;
}

#buttonbarschoolimage {
    display: block;
    float: left;
	vertical-align: middle;
	height: 44px;
	border: 1px solid #D5D5D5;
}

#buttonbarschoolname {
    display: block;
	padding: 0px;
	margin-top: 4px;
	text-align: left;
	vertical-align: middle;
	float: left;
}

.buttonbarrightbutton {
    display: block;
    float: right;
}

.buttonbarsycamorelogo {
    margin: 0 auto;
    display: block;
	text-align: center;
	vertical-align: middle;
	height: 44px;
}

.schoolstuff {
    display: inline-block;		
    margin: 0 auto;
	text-align: center;
	vertical-align: middle;
	width: 341px;
}

.rightbutton {
    float: right;
}

.leftbutton {
    float: left;
}

<div class='buttonbarframe'>
    <div class='leftbutton buttonbarspan'>
        <a class='backbutton btn btn-large btn-danger' href=''><i class='icon-white icon-arrow-left'></i> Logout</a>
    </div>
    <div class='schoolstuff buttonbarspan'>
        <img id='buttonbarschoolimage' src='/Schools/$EntityValue/logo'>
        <h2 id='buttonbarschoolname'>Tri-County School</h2>
    </div>
    <div class='rightbutton buttonbarspan'>
        <input type='submit' class='buttonbarrightbutton btn btn-large btn-primary' href='parentcheckin.php' value='Login'>
    </div>
</div>

Here is an example of the problem.

Image of the problem. http://www.overclock.net/image/id/6330507/width/900/height/900/flags/LL

解决方案

Putting text-align: center on the parent div will fix this issue. What you have right now centers the text in the div which should already be centered.

see: http://jsfiddle.net/AJmSw/

Inline-block elements will be positioned based on the parent containers text align. With both your side divs floating this will work fine.

Alternatively removing the display: inline-block rule from the center div will allow the margin: 0 auto; to take effect also centering the div see: http://jsfiddle.net/b4mWU/

这篇关于为什么我的Div中心本身不在其父中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！