標題和圖像標頭不對齊

這裏是我的代碼標題和圖像標頭不對齊

header img{ 
 
\t width:10%; 
 
\t vertical-align: middle; 
 
} 
 
header h1{ \t 
 
\t text-align: right; 
 
\t display:inline; 
 
\t position: absolute; 
 
} 
 
header { 
 
\t width : 100%; 
 
\t height: 1% ; 
 
\t background: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href = "css\main.css" > 
 
    <link rel="stylesheet" href="css\responsive.css"> 
 
</head> 
 
<body> 
 
    <header> 
 
    <div class = "container-fluid"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/12/15/09/31/badge-1093966_640.png" alt=""> 
 
    <h1>KUNAL MEHTA</h1> 
 
    </div> 
 
    </header> 
 
    <section> 
 
    
 
    </section> 
 
    <footer> 
 
    
 
    </footer> 
 

 
    <script src = "js/main.js"></script> 
 

 
</body> 
 
</html>

什麼，我說的是我想要的H1去正確的，他們都應該在中心對齊父母Element.i使用BOOTSTRAP，因此鼓勵使用bootstraps的答案

來源

2016-10-14 Kunal_Boss

中心水平，垂直，或兩者兼而有之？ – j08691

水平和垂直 –

那麼，您始終可以使用flex來實現這個功能 - 我真的推薦使用它，因爲它可以使解決方案更簡潔，更易於維護。請注意，我只需更改用於製作此解決方案的容器元素，並清除h1邊距。

.container-fluid { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 100px 
} 

.container-fluid h1 { 
    margin: 0 
} 

header { 
    background: red; 
} 

header img{ 
    width:10%; 
}

你可以閱讀更多關於它here

來源

2016-10-14 15:18:44 Chen

標題和圖像標頭不對齊

回答

相關問題