CSS -在具有相对位置的边框左侧添加图标
CSS -在具有相对位置的边框左侧添加图标
提问于 2018-08-13 04:59:15
我有以下代码笔：
https://codepen.io/anon/pen/RBdWOa
我需要的是在最左边的位置显示一个图标16x16在最左边的位置如下图所示(红色圆圈应该是图标)。
对于以下HTML元素，我有一个LeftIcon类。
<i class="fa fa-search LeftIcon"></i>
.LeftIcon {
position: relative;
bottom: 0;
right: 0px;
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}但是如果你看到没有对齐我需要它的地方。
有什么线索吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-13 05:17:02
如果要将一个元素放在另一个元素的顶部，请在父元素上设置相对位置，在子元素上设置绝对位置。然后使用顶部和左侧来根据您的需要定位项目。在您的示例中，您显示的是彼此相对的元素。
下面是你如何实现你想要的东西。
在.DialogBox__message-content.
- Then上设置
- 'position: relative‘将图标放在上面的目录中。
- 在
.LeftIcon类上设置以下样式。
position: absolute; //places the icon in absolute position to message-content*
top: calc(50% - 10px); // sets the top at 50% - half of the height (19px)*
left: -12px; // places the element on top of the line*
html body {
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
height: 100%;
-webkit-text-size-adjust: 100%;
font-size: 14px;
font-weight: 400;
font-style: normal;
}
div {
display: block;
}
.DialogBox {
text-align: right;
}
.DialogBox__message {
margin-bottom: 20px;
-webkit-transition: .35s ease;
transition: .35s ease;
text-align: right;
}
.DialogBox__messages-wrapper {
padding: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
min-height: 100%;
background-color: #f2f2f2;
border-style: solid;
}
.DialogBox__message-content {
background-color: #ffffff;
color: #525860;
padding: 15px 35px;
max-width: 400px;
display: inline-block;
margin-bottom: -20px;
margin-right: 20px;
margin-left: 0;
border-radius: 20px;
text-align: left;
word-wrap: break-word;
border-style: dashed;
position: relative;
}
.LeftIcon {
position: absolute;
top: calc(50% - 10px);
left: -12px;
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">
This is a first message.
<i class="fa fa-search LeftIcon"></i>
</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">This is a second message.</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">This is a third message.</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">
This is a final message bye bye.
<i class="fa fa-search LeftIcon"></i>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-08-13 05:42:33
罗伊很好地掩饰了这个问题。当我在做这个Codepen的时候。唯一的区别是我使用transform:translate()来水平对齐图标。除此之外，您还可以使用text-align: center;和line-height: 17px;将Font Awesome图标居中。
https://codepen.io/Henk-io/pen/VBReaa?editors=1100
.LeftIcon {
position: absolute; /*Needs to be Absolute Positioned to the parent relative div*/
top: 50%; /*50% from the top*/
left: -10px; /*-10px left as the width is 20px*/
transform: translate(0, -50%); /*Moves postion of element*/
text-align: center; /*Aligns icon in center vertically*/
line-height: 17px; /*Aligns icon in center horizontally*/
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}Stack Overflow用户
发布于 2018-08-13 05:36:03
我会使用flex-box来做这样的事情。
以下是您的示例的简化版本：
.dialog-box {
display: flex;
flex-direction: row;
align-items: center;
min-width: 100%;
height: 32px;
background: #cccccc;
}
.dialog-box__search {
min-width: 10%;
display: block;
color: #ff0000;
text-align: center;
}
.dialog-box__content {
text-align:center;
width: 100%;
}<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="dialog-box">
<div class="dialog-box__search">
<i class="fa fa-search"></i>
</div>
<div class="dialog-box__content">
First content
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51812800
复制相关文章
相似问题