html - 两个 div 排成一行，其中第一个 div 包含其他一些 div

Question

我想制作一些内容框。

一个数字图标，然后是标题

正文正文正文

这是一个fiddle example

<div class="icon_title_wrapper">
    <div class="icon_number_container">
        <div class="icon_number_number">1</div>
    </div>
    <div class="icon_title_title">THIS IS TITLE</div>
</div>

我想有两个 div(图标和标题)

但是图标 div 有点复杂，因为我需要让数字垂直和水平居中....现在这个数字与标题 div 混淆了...

你们能帮帮我吗？

谢谢

Answer 1

您必须设置图标编号容器和标题display: inline-block。而且您必须删除标题 div 上的 float，因为它会弄乱内容。

在下面的代码片段中试试:

.icon_number_container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 31px;
    height: 31px;
    background-color: #45484c; 
    border-spacing:5px;
}

.icon_number_container, .icon_title_title{
    display:inline-block;
}

.icon_number_number{
    display: inline-block;
    color: #fff;
    line-height: 31px;
    vertical-align: middle;
}

<div class="icon_title_wrapper">
    <div class="icon_number_container">
        <div class="icon_number_number">1</div>
    </div>
    <div class="icon_title_title">THIS IS TITLE</div>
</div>
as a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text

这是一个fiddle为长标题实现 word-wrap。您可以尝试并修改它，但是当标题太长时您希望数字和标题垂直对齐。