如何在嵌入式块中将图像与文本对齐？
[英]How can I align my images with text in an inline-block?
问题描述
I have a side navigation bar, and I have images beside the text, which show the destination of each link. 
我有一个侧面导航栏，并且在文本旁边有图像，这些图像显示每个链接的目标。 I want the images and their respective link to be side-by-side. 我希望图像及其各自的链接并排。 Additionally, I want each link's border to be equal. 另外，我希望每个链接的边界都相等。 Here's how it looks now. 这是现在的样子。
In the first line, I need the guitar icon next to the Chords link, and the same for the following links and their icons. 在第一行中，我需要Chords链接旁边的吉他图标，以下链接及其图标也一样。 Here's the CSS I'm using. 这是我正在使用的CSS。
.sidebar { display: inline-block; overflow: hidden; position: fixed; margin-top: 60px; width: 200px; height: 300px; background-color: rgba(50, 50, 50, .8); transition: width .3s ease; } .sidebar a { font-size: 1.8em; text-decoration: none; color: white; border: 1px solid rgba(25, 25, 25, .5); background-color: rgba(50, 50, 50, 1); border-collapse: collapse; transition: background-color .1s ease; }
<div class="sidebar" id="sidebar"> <img src="img/chords.png"> <a href="#">Chords</a> <img src="img/tabs.png"> <a href="#">Tabs</a> <img src="img/notereading.png"> <a href="#">Note Reading</a> </div>
I tried setting the position property of the links to relative , and this worked for one link. 我尝试将链接的position属性设置为relative ，这对一个链接有效。 When I inserted the others, however, they did not act as if they were within an inline-block element. 但是，当我插入其他元素时，它们并没有像它们在inline-block元素中那样起作用。 That is, they continued on the same line. 也就是说，他们继续在同一行。 I thought the inline-block forced elements on the same line only if they could fit, though. 我认为，仅当行内的强制插入元素适合时，它们才在同一行上。 Any help would be appreciated. 任何帮助，将不胜感激。 Thanks! 谢谢！
1 个解决方案
解决方案1
0 2019-03-03 05:57:51
The inline-block is not cause of your problem. 内联块不是您的问题的原因。 Try this HTML instead. 尝试使用此HTML。
.sidebar { display: inline-block; overflow: hidden; position: fixed; margin-top: 60px; width: 200px; height: 300px; background-color: rgba(50, 50, 50, .8); transition: width .3s ease; } .sidebar a { display: inline-block; font-size: 1.5em; text-decoration: none; color: white; border: 1px solid rgba(25, 25, 25, .5); background-color: rgba(50, 50, 50, 1); border-collapse: collapse; transition: background-color .1s ease; width: 140px; } .sidebar img { transform: translateY(15px); width: 50px; } .sidebar_item { height:60px; display: inline-block; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="sidebar" id="sidebar"> <div class="sidebar_item"> <img src="https://drive.google.com/uc?id=1TkoF1IzxW9y3Xs1YWYpDeX7qCye3ud45" width=55px height=55px> <a href="#">Chords</a> </div> <div class="sidebar_item"> <img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px> <a href="#">Tabs</a> </div> <div class="sidebar_item"> <img src="https://drive.google.com/uc?id=1lLkosBRSHmuz6MRN-Vb3UQsX7MrfaX1v" width=55px height=55px> <a href="#">Note Reading</a> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.