英文:
Aligning on the same height two items using in CSS
问题
I'm currently trying to align my text 'hello' with the pencil icon you see below. But apparently the pencil icon just wants to sit below the text.
Both the text and the icon are contained within a div with the following style:
border-radius: 4px;
height: 50px;
border: 1px solid transparent;
while the icon itself is a div with an icon inside of it, and the div has the following style applied to it:
width: 40px;
opacity: 0;
margin-left: auto;
height: 50px;
background-color: #88888850;
How can I move up the edit icon in order to match the top and bottom of the bordered container?
I created also an example in this snippet:
<body>
<div class="bordered-container">
<span class="title">Hello</span>
<div class="edit-icon">
EDIT
</div>
</div>
</body>
英文:
I'm currently trying to align my text 'hello' with the pencil icon you see below. But apparently the pencil icon just wants to sit below the text.
Both the text and the icon are contained within a div with the following style:
border-radius: 4px;
height: 50px;
border: 1px solid transparent;
while the icon itself is a div with an icon inside of it, and the div has the following style applied to it:
width: 40px;
opacity: 0;
margin-left: auto;
height: 50px;
background-color: #88888850;
How can I move up the edit icon in order to match the top and bottom of the bordered container?
I created also an example in this snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bordered-container {
height: 50px;
border: 1.5px solid #88888850;
margin: 30px;
}
.title {
text-align: center;
flex: 1;
font-size: 1.8rem;
font-weight: bolder;
}
.edit-icon {
width: 20px;
opacity: 1;
display: flex;
justify-content: center;
padding: 10px;
align-items: center;
margin-left: auto;
margin-top: 0;
height: 50px;
background-color: #88888850;
}
<!-- language: lang-html -->
<body>
<div class="bordered-container">
<span class="title">Hello</span>
<div class="edit-icon">
EDIT
</div>
</div>
</body>
<!-- end snippet -->
答案1
得分: 3
尝试以下我下面的内容。我已经注释掉了很多你不需要的东西，并标记了我添加的部分。基本上容器需要是一个 flexbox，而不是 edit-icon。另外，如果你不定义高度，事物将按照它们占用的大小进行排列，这需要更少的代码。
如果你还没有看过的话，这个页面 是一个关于学习 Flexbox 的非常好的资源。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bordered-container {
/*height: 50px;*/
border: 1.5px solid #88888850;
margin: 30px;
/* ADDED */
display: flex;
align-items: center;
}
.title {
text-align: center;
flex: 1;
font-size: 1.8rem;
font-weight: bolder;
}
.edit-icon {
/*width: 20px;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-top: 0;
height: 50px;*/
padding: 10px;
background-color: #88888850;
}
<!-- language: lang-html -->
<div class="bordered-container">
<span class="title">Hello</span>
<div class="edit-icon">
EDIT
</div>
</div>
<!-- end snippet -->
英文:
Try what I have below. I've commented out a lot of stuff you didn't need and I marked what I've added. Basally the container needs to be a flexbox, not the edit-icon. Also if you don't define heights, things will just flow to the sizes they take up, and it require less code.
this page is a really great resource on learning about Flexbox if you haven't seen it already.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bordered-container {
/*height: 50px;*/
border: 1.5px solid #88888850;
margin: 30px;
/* ADDED */
display: flex;
align-items: center;
}
.title {
text-align: center;
flex: 1;
font-size: 1.8rem;
font-weight: bolder;
}
.edit-icon {
/*width: 20px;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-top: 0;
height: 50px;*/
padding: 10px;
background-color: #88888850;
}
<!-- language: lang-html -->
<div class="bordered-container">
<span class="title">Hello</span>
<div class="edit-icon">
EDIT
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论