保證金財產未按預期

-1

爲什麼不能我只是用在類.logomargin-top:50%和margin:bottom:50%和.right到垂直對齊他們保證金財產未按預期

據我讀過margin:bottom:50%和margin-top:50%應自動垂直居中既right和.logo在他們的容器header，而是他們來到頁面的一些隨機中間位置。

這是我的主要問題（在窗口大小調整這種怪異的保證金行爲）
- 如果我使用margin-top:x%並在header垂直方向的中間位置，讓他們後來當我調整窗口的大小小，從作爲LOGO的變化在header的中間位置。

html { 
 
    background-color: white 
 
} 
 
body { 
 
    width: 88.5%; 
 
    height: 1200px; 
 
    margin: 0 auto; 
 
    border: 2px solid black; 
 
    background-color: #161e2c; 
 
} 
 
.top-box { 
 
    margin: 0 auto; 
 
    width: 99.5%; 
 
    height: 153px; 
 
    background-color: #314e59; 
 
    border: 1px solid rgb(211, 41, 97); 
 
    box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74); 
 
} 
 
a { 
 
    display: inline-block; 
 
    margin: 23px 0 0 5px; 
 
    padding: 5px 5px; 
 
    max-width: 400px; 
 
    color: white; 
 
    text-decoration: none; 
 
    font-size: 500%; 
 
    background-color: pink; 
 
    border: 2px solid black; 
 
} 
 
.right { 
 
    margin-top: 13px; 
 
    display: inline-block; 
 
    width: 600px; 
 
    background-color: pink; 
 
    border: 2px solid black; 
 
    float: right; 
 
    text-align: center; 
 
    color: white 
 
} 
 
ul { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    width: 100%; 
 
    padding-left: 0; 
 
} 
 
li { 
 
    display: inline-block; 
 
    padding: 7px; 
 
}

<body> 
 
    <header class="top-box"> 
 
    <a href="#" class="logo">Konoha</a> 
 
    <div class="right"> 
 
     <ul> 
 
     <li>Text</li> 
 
     <li>Text</li> 
 
     <li>Text</li> 
 
     <li>Text</li> 
 
     <li>Text</li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</body>

現在我使用margin: (x) px這就是爲什麼他們留在中間，即使我使窗口小

來源

2016-06-26 Mahaveer sharma

的可能的複製[如何垂直對齊內部格圖像]（http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image- inside-div） –

我的主要問題與您發佈的鏈接不同 –

-1

如果你想你應該使用一個元素的邊框，該命令，而不是邊界樣式。

h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }

來源

2016-06-26 16:01:02

你是混合了很多東西，讓我們把這個簡單的使用flexbox

使用：display: flex; justify-content: space-between; align-items: center;在.top-box

和刪除某些屬性。

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
html { 
 
    background-color: white 
 
} 
 
body { 
 
    width: 88.5%; 
 
    height: 1200px; 
 
    margin: 0 auto; 
 
    border: 2px solid black; 
 
    background-color: #161e2c; 
 
} 
 
.top-box { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    height: 153px; 
 
    background-color: #314e59; 
 
    border: 1px solid rgb(211, 41, 97); 
 
    box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74); 
 
} 
 
a { 
 
    padding: 5px; 
 
    max-width: 400px; 
 
    color: white; 
 
    text-decoration: none; 
 
    font-size: 500%; 
 
    background-color: pink; 
 
    border: 2px solid black; 
 
} 
 
.right { 
 
    max-width: 600px; 
 
    background-color: pink; 
 
    border: 2px solid black; 
 
    text-align: center; 
 
    color: white 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    width: 100%; 
 
    padding: 5px; 
 
    margin: 0 
 
} 
 
li { 
 
    display: inline-block; 
 
}

<body> 
 
    <header class="top-box"> 
 
    <a href="#" class="logo">Konoha</a> 
 
    <div class="right"> 
 
     <ul> 
 
     <li>Text</li> 
 
     <li>Text</li> 
 
     <li>Text</li> 
 
     <li>Text</li> 
 
     <li>Text</li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
</body>

來源

2016-06-26 16:04:45 dippas

保證金財產未按預期

回答

相關問題