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
Bài liên quan
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 đó.