使用CSS将<div>左对齐到居中的<div>
罗伯特·布什
我正在尝试创建一个具有<div>下图所示样式的CSS样式的网页。但是我不知道如何完成这项工作。我已经按照答案（https://stackoverflow.com/a/26599439/478406和https://stackoverflow.com/a/26598329/478406）的建议尝试了两种变体，但我想我缺少了一些东西。
加里
如果我正确理解了您的要求，则下面的HTML和CSS应该可以满足您的要求。
请注意，display:inline-block允许两个div元素彼此相邻放置，因此您可以text-align独立设置它们。同样，由于该inline-block属性，当屏幕尺寸变小时，元素将自动换行。
.message-text{
text-align:left;
display:block;
}
.some-text,
.my-list{
display:inline-block;
text-align:left;
vertical-align:top;
}
.my-list{
text-align:center;
}
ul{
margin-top:0px;
}
<div id='message-container'>
<div class='message-text'>Message Text</div>
<div class='some-text'>Some text</div>
<div class='my-list'>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将文本居中对齐到div的底部
- 2
如何使用居中对齐对齐 div 内的左元素
- 3
将包含左对齐文本的div居中+另一个div居中
- 4
将固定的左对齐div的内容对齐到右侧
- 5
html css 外层 div 文本居中对齐，内 div 文本左对齐
- 6
使用css将div垂直对齐到div
- 7
CSS将div的div居中
- 8
将 div 垂直对齐到未知高度 div 而不影响水平居中
- 9
使用CSS将div等水平居中
- 10
默认情况下，居中对齐DIV，左对齐
- 11
HTML CSS位置div左居中右
- 12
将div与水平居中对齐的错误
- 13
无法将 div 居中对齐到底部
- 14
CSS布局-将两个div并排居中并对齐
- 15
将div列中的3个div与文本居中对齐
- 16
CSS：无法将div居中
- 17
CSS：无法将div居中
- 18
如何“左居中”对齐div中的已包装内嵌块
- 19
使用CSS在DIV上居中DIV
- 20
在<div>内将<div>居中
- 21
CSS在div内的div内对齐div
- 22
如何使用CSS3使div居中对齐？
- 23
使用bootstrap css将两个div水平并排居中对齐页面
- 24
使用 Laravel 和 Css 将单个或多个图像或 div 居中对齐
- 25
使用垂直对齐将div中的按钮垂直居中
- 26
如何使用CSS将按钮居中而不使用div
- 27
如何让div左对齐？
- 28
将Absoloute div居中到大
- 29
使用Flexbox将div居中
我来说两句