30/09/2018, 23:16

Căn giữa bằng margin

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)
ACP viết 01:29 ngày 01/10/2018

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 đó.

Bài liên quan
0