英文:
Flexbox : make first div center and second div align at the end
问题
我想创建一个菜单，其中菜单的名称位于其父元素的中心，而操作按钮位于菜单的末尾。
我尝试过像这样做：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.container{
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width:16rem;
background-color:green;
padding:1rem;
margin-top:1rem;
}
.text{
margin-left: auto;
margin-right: auto;
background-color:lime;
padding:1rem;
}
.ico{
height: 2em;
width: 2em;
}
<!-- language: lang-html -->
<p>What I get</p>
<div class="container">
<span class="text">My title is a bit long</span>
<button class="ico">IC</button>
</div>
<p>What I want with my button positioned at the end</p>
<div class="container">
<span class="text">My title is a bit long</span>
</div>
<!-- end snippet -->
但正如您所见，文本不再完全位于 div 的中心。
那么，如何保持文本位于 div 的中心，并将按钮添加到末尾呢？
英文:
I want to make a menu where the name of the menu is at the center of his parrent and the action button is at the end of the menu.
I have tried to do something like this :
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.container{
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
width:16rem;
background-color:green;
padding:1rem;
margin-top:1rem;
}
.text{
margin-left: auto;
margin-right: auto;
background-color:lime;
padding:1rem;
}
.ico{
height: 2em;
width: 2em;
}
<!-- language: lang-html -->
<p>What I get</p>
<div class="container">
<span class="text">My title is a bit long</span>
<button class="ico">IC</button>
</div>
<p>What I want with my button positioned at the end</p>
<div class="container">
<span class="text">My title is a bit long</span>
</div>
<!-- end snippet -->
But as you can see, the text is not exactly at the center of the div anymore.
So, how can I keep my text at the center of the div and add my button at the end?
答案1
得分: 0
以下是您的建议：
这是我的建议：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 16rem;
background-color: green;
padding: 1rem;
margin-top: 1rem;
}
.text {
background-color: lime;
padding: 1rem;
}
.ico,
.spacer {
flex: 0 0 2em;
height: 2em;
width: 2em;
}
.spacer {
visibility: hidden;
}
<!-- 语言：lang-html -->
<p>我希望我的按钮在末尾位置</p>
<div class="container">
<div class="spacer"></div>
<span class="text">我的标题有点长</span>
<button class="ico">IC</button>
</div>
<!-- 结束代码片段 -->
这是它给我的效果：
希望我的答案对您有所帮助。
<details>
<summary>英文:</summary>
Here's my suggestion:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container{
display: flex;
justify-content: space-between;
align-items: center;
width:16rem;
background-color:green;
padding:1rem;
margin-top:1rem;
}
.text{
background-color:lime;
padding:1rem;
}
.ico, .spacer{
flex: 0 0 2em;
height: 2em;
width: 2em;
}
.spacer {
visibility: hidden;
}
<!-- language: lang-html -->
<p>What I want with my button positioned at the end</p>
<div class="container">
<div class="spacer"></div>
<span class="text">My title is a bit long</span>
<button class="ico">IC</button>
</div>
<!-- end snippet -->
Here's what it gives me:
[![enter image description here][1]][1]
Hope that my answer helps you.
[1]: https://i.stack.imgur.com/2RYKq.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论