Question

我想制作一些内容框。

数字图标，然后是标题

文字文字文字

<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

这是针对长标题实施word-wrap的{{3}}。您可以尝试并修改它，但是当标题太长时，您希望数字和标题垂直对齐。

Answer 2

您需要从float: right;中删除.icon_title_title。并申请以下css将为你工作。

.icon_title_title {
    display: table-cell;
    padding-left: 5px;
    vertical-align: middle;
}

<强> Updated Fiddle

修改

要解决丑陋的图标问题，您应该使用display:inline-block;。

<强> Fiddle

Answer 3

＆＃13;

.icon_number_container{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 31px;
  height: 31px;
  background-color: #45484c; 
  border-spacing:5px;
}

.icon_number_number{
  display: inline-block;
  color: #fff;
}

.icon_title_title{
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
.icon_title_wrapper {
  display: table;
  width: 100%;
}

＆＃13;

<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

＆＃13;

两个div在行，其中第一个div包含一些其他div

3 个答案: