使图像与文本对齐
[英]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.