使圖像與文本對齊
[英]Aligning an image with text
問題描述
我正在創建一個非常基本的占位符網站。 在頁面中間居中，應顯示為：
（公司徽標）網站將於2018年推出
公司徽標使用與文本相同的字體。
默認情況下，圖像恰好位於文本旁邊，但是當我嘗試將其居中對齊時，這種情況會發生變化。
body { background-color: #fff; background-size: cover; text-align: center; } img { float: left; width: 350px; } h1 { position: relative; top: 18px; left: 10px; }
<body> <div class="header"> <img src="http://via.placeholder.com/350x100" alt="logo" /> <h1>WEBSITE COMING IN 2018</h1> </div> </body>
什么是最有效的方法？
2 個解決方案
解決方案1
1 已采納 2017-11-13 14:42:36
您可以使用flexbox來解決這個flexbox
body { background-color: #fff; background-size: cover; /* added */ margin: 0; height: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .header { display: flex; text-align: center; align-items: center; }
<body> <div class="header"> <img src="http://via.placeholder.com/350x100" alt="logo" /> <h1>WEBSITE COMING IN 2018</h1> </div> </body>
解決方案2
0 2017-11-13 14:46:08
您可以使用display: flex; 在您的.header元素上如下
body { background-color: #fff; } img { width: 200px; } h1 { margin-left: 10px; line-height: 100%; } .header { display: flex; justify-content: center; }
<body> <div class="header"> <img src="http://via.placeholder.com/350x100" alt="logo" /> <h1>Website Coming in 2018</h1> </div> </body>
注意：文本的輕微垂直偏移是由於其基線下方的空間所致，該空間保留給j，g，p等在基線以下延伸的字母。 一旦您在文本中使用這些字母中的任何一個，它就會完美地居中。 我將大寫字母更改為常規文本模式來演示這一點。
對齊文字和背景圖片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.