我如何将文本居中 DIV？

Question

我有一个小型离线网站（为此上传@http://razorcloud.cz.cc/），其中有一个 header，其中包含一个徽标、一个导航栏和一个通知栏。我似乎把它们都排列得很好，而且是我想要的。然而，缺点是现在通知栏中的文本(header-alert) 没有正确居中。

HTML:

<header class="header">
            <img style="float: left; padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
            <div class="bottom-header">
                <div class="navigation-bar" style="margin-top: 90px">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                            <div class="dropdown-container dropdown-shadow">
                                <ul class="dropdown-column">
                                    <li><a href="#">First</a></li>
                                    <li><a href="#">Second</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#">Video</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="clear:left"></div>
            <div class="header-alert">
                This website is still under development!
            </div>
        </header>

CSS:

.header
{
    background-color: black;
    color: white;
    display: block;
    font-family: "GillSansStdRegular";
    margin-bottom: 20px;
    padding-top: 10px;
    position: relative;
}

.bottom-header
{
    display: block;
    position: relative;
    padding: 0 20px;
}

.navigation-bar
{
    clear: right;
    color: white;
    display: inline-block;
    font-size: 12px;
    float: right;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.header-alert
{
    background-color: white;
    border-bottom: 2px solid black;
    color: black;
    font-family: "GillSansStdLightRegular";
    font-size: 110%;
    margin-top: 15px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

我已经多次尝试修复它，例如显示和边距属性，但我似乎无法找到解决方案，不包括修改我当前拥有的确切布局。尽管这超出了我的理解范围，但它可能很简单。我不是在寻找任何东西，比如添加空格来平衡它。

Answer 1

在.navigation-bar

中添加height: 40px;

Answer 2

.navigation-bar将.header-alert推开，只需在.navigation-bar中添加position: absolute;并设置与右侧的间距right: 10px;（对于例如）。

您还可以从 .navigation-bar

中删除 float:right;

Answer 3

将您的听众提醒前的一行从 "clear:left" 更改为 "clear:both"

<div style="clear:left"></div>
            <div class="header-alert">

至

<div style="clear:both"></div>
            <div class="header-alert">

并移除 margin-top: 15px;对于 .header-alert

Answer 4

希望对您有所帮助，

HTML:

<header class="header">
        <div class="img">
        <img src="images/versace-logo.bmp" width="230" height="120" />
</div>
        <div class="bottom-header">
            <div class="navigation-bar">
                <ul>
                    <li>
                        <a href="#">Home</a>
                        <div class="dropdown-container dropdown-shadow">
                            <ul class="dropdown-column">
                                <li><a href="#">First</a></li>
                                <li><a href="#">Second</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">Video</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="header-alert">
            This website is still under development!
        </div>
    </header>

CSS:

.header
{
    background-color: black;
    display: block;
    font-family: "GillSansStdRegular";
    margin-bottom: 20px;
    padding-top: 10px;
    position: absolute;
    width: 100%;
}
.img {
    float: left; padding-left: 20px; position: relative;

}

.bottom-header
{
    position: relative;
    float: left;
    width: 100%;

}

.navigation-bar
{
    font-size: 12px;
    text-transform: uppercase;
    float: left;
    color: white;
}

.header-alert
{
    background-color: white;
    border-bottom: 2px solid black;
    color: black;
    font-family: "GillSansStdLightRegular";
    font-size: 110%;
    margin-top: 15px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    position: relative;
    float: left;
}

Check this link: working demo

Answer 5

问题在于 navigation-bar 如何过度向下扩展到影响 header-alert 的程度。您还使用边距和浮动来定位它。我下面的更正是基于我为位于 http://calaverasfamilydentistry.net/

的客户编码的最近网站的导航菜单

删除或注释掉以下内容：

.bottom-header {
    /*display: block;
    padding: 0 20px;
    position: relative;*/
}

并添加或覆盖以下内容（您可以调整 bottom 和 right 属性，但我已经冒昧 brute-forcing 我的方式来匹配您的原始位置。）

.navigation-bar {
    bottom: 0.75em;
    position: absolute;
    right: 1.65em;
}

您也可以删除或注释掉以下内容，因为它不是真正需要的，可能会妨碍您。

.navigation-bar {
    /*clear: right;
    color: white;
    display: inline-block;
    float: right;*/
}

我如何将文本居中 DIV？

How Would I Center Text In This DIV?

html

css

text-align

center