使图像与文本对齐
[英]Aligning an image with text
问题描述
I'm creating a very basic placeholder site. 
我正在创建一个非常基本的占位符网站。 Centered, in the middle of the page, it should read: 在页面中间居中，应显示为：
(COMPANY LOGO) WEBSITE COMING IN 2018
The company logo uses the same font as the text. 公司徽标使用与文本相同的字体。
By default the image sits alongside the text nicely, however this changes when I attempt to align it centrally. 默认情况下，图像恰好位于文本旁边，但是当我尝试将其居中对齐时，这种情况会发生变化。
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>
What would be the most effective way to do this? 什么是最有效的方法？
2 个解决方案
解决方案1
1 已采纳 2017-11-13 14:42:36
You could approach this using flexbox 您可以使用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
You can use display: flex; 您可以使用display: flex; as follows on your .header element 在您的.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>
Note: the slight vertical offset of the text is due to the space below its baseline which is reserved for letters like j, g , p etc. which extend below the baseline. 注意：文本的轻微垂直偏移是由于其基线下方的空间所致，该空间保留给j，g，p等在基线以下延伸的字母。 As soon as you use any of these letters in your text it will be perfectly centered. 一旦您在文本中使用这些字母中的任何一个，它就会完美地居中。 I changed the uppercase letters to regular text mode to demonstrate this. 我将大写字母更改为常规文本模式来演示这一点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.