html - 无法使用环绕文本居中元素,因为文本环绕将父级设置为 100% 宽度
问题描述
我遇到了换行文本的问题。
我希望我的项目的内容居中(我已经完成了justify-content: center;
)
但是当文本换行时 - 我希望该文本向左对齐。
但是,当文本换行时,父元素的宽度自动为 100%。因此,虽然文本左对齐,但内容似乎没有居中,因为它不能真正以 100% 的宽度居中。
我希望这是有道理的!!
任何帮助都会很棒!
这是我的问题的一个小提琴: https ://jsfiddle.net/whqbonad/38/
.container {
width: 300px;
margin: 0 auto;
}
.item {
width: 50%;
float: left;
background: #e3e3e3;
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
}
<div class='container'>
<div class='item'>
<span>Hello 1</span>
</div>
<div class='item'>
<span>Hello 2</span>
</div>
<div class='item'>
<span>Hello 3</span>
</div>
<div class='item'>
<span>Hello 4</span>
</div>
<div class='item'>
<span>Hello 5</span>
</div>
<div class='item'>
<span>Hello but longer!</span>
<!-- I want this to be centered, but the text be left aligned -->
</div>
</div>
解决方案
此代码正常工作
.container {
width: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
.item {
flex-basis: 50%;
background: #e3e3e3;
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
span {
display: block;
width: 80%;
background: red;
text-align: left;
height: 100%;
}
<div class='container'>
<div class='item'>
<span>Hello 1</span>
</div>
<div class='item'>
<span>Hello 2</span>
</div>
<div class='item'>
<span>Hello 3</span>
</div>
<div class='item'>
<span>Hello 4</span>
</div>
<div class='item'>
<span>Hello 5</span>
</div>
<div class='item'>
<span>Hello but longer!</span>
</div>
</div>
推荐阅读
- python - 遍历 Python 字典中所有可能的参数组合。在每次迭代时将它们作为 kwargs 传递给函数
- python - 如何在 PANDAS 数据框中用不同大小写替换单词
- javascript - 如何使用包含布尔值的全局变量来更改谷歌表格脚本中的其他变量?
- java - RestTemplate 自定义:使用 RestTemplateBuilderConfigurer 配置您的自定义实例
- c - C中的素数之和
- javascript - 摩卡“0通过”
- sqlite - 什么可能会阻止 SQLite WAL 文件被清除?
- xml - 使用 XSLT 添加包装器并更改命名空间
- mongodb - spring-data-mongodb中没有“_class”属性的对象的默认实现映射
- python-3.x - Setuptools - find_package 和自动子模块依赖管理