Căn giữa bằng margin

[Dao_An (Đào An)]

Vì sao e đã dùng margin:0 auto; ở class #menu-bar mà phần text “NEWS” và div Find local news ko vào giữa như của họ http://www.completewebdevelopercourse.com/content/2-css/bbc.html vậy?

[code]

<title>Technology - BBC News</title>

<style type="text/css">
    #topbar {
        width: 1000px;
        margin: auto;
        height: 40px;
    }

    #logo {
        margin-top: 8px;
        float: left;
        margin-right: 8px;
    }

    body {
        padding: 0;
        margin: 0;
        font-family: Helvetica, Arial, freesans, sans-serif;
    }

    .topbar-section {
        float: left;
        border-left: 1px #CCCCCC solid;
        height: 100%;

    }

    #signin-image {
        width: 21px;
        margin: 10px 15px;
        float: left;
    }

    #signin-text {
        font-weight: bold;
        font-size: 90%;
        position: relative;
        top: 11px;
        padding-right: 50px;
    }

    #wigglyline {
        float: left;
        height: 40px;
    }

    #bell {
        height: 20px;
        margin: 10px;
    }

    #bell-div {
        float: left;
    }

    .topbar-menu {
        font-weight: bold;
        font-size: 90%;
        padding: 11px 15px 0 15px;
        height: 29px;
    }

    #more-arrow {
        width: 16px;
        margin-left: 20px;
    }

    #search-box {
        background-color: #E4E4E4;
        font-weight: bold;
        font-size: 14px;
        padding: 5px;
        border: none;
        margin: 5px 0 5px 5px;
        float: left;
    }

    #magnifying-glass {
        height: 26px;
        margin-top: 5px;

    }

    .clear {
        clear: both;
    }

    #menu-bar-container {
        border-top: 1px solid #CCCCCC;
        background-color: #BB1919;
        width: 100%;
        height: 70px;
    }

    #menu-bar {
        width: 1000px;
        margin:0 auto;
    }

    h1 {
        padding: 10px;
        margin: 0;
        color: white;
        font-size: 40px;
        font-weight: normal;
        float: left;
    }

    #local-news {
        float: right;
        border: 1px #BB4545 solid;
        width: 180px;
        padding: 5px 5px 0 10px;
        margin: 10px 5px 0 0;

    }

    #local-news a {
        color: white;
        text-decoration: none;
        font-size: 20px;
        position: relative;
        bottom: 15px;
    }

    #local-news a:hover {
        text-decoration: underline;
    }

    #local-news img {
        height: 40px;
    }
</style>

Sign in

New

Sport

Weather

iPlayer

TV

More

NEWS

Find local news

[/code] (http://www.completewebdevelopercourse.com/content/2-css/bbc.html)

[Hao (ACP)]

Cái này không phải do lỗi css. Do em dùng thẻ div (thẻ này width luôn là 100% theo thằng cha) cho nên cái text NEWS của em mặc định sẽ nằm bên trái (text từ trái sang phải mà).

Em phải cho cái thẻ chứa cái text đó có width = 1000 px luôn thì mới vào giữa như cái logo. Theo trang của BBC thì nó xét #menu-bar có width là 1000px đó.