文字中的文字稍微不对齐？

Question

我正在构建我的投资组合网站，我有4个单独的框，我可以做4个单独的事情（插图，视频编辑等），下面使用<small>标签我将有一个简短的描述。这就是它目前的样子 Example

正如您所看到的，<small>文本位于背景颜色框之外且未正确对齐（即我希望框与文本一起增长，对齐并居中），其中一个框长于其余的部分。这是我的HTML;

<div id="price-timeline">
                                <div class="price">
                                    <h4>Animation<small>short description here</small></h4>

                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Illustration<small>short description here</small></h4>


                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Video Editing<small>short description here</small></h4>

                                </div> <!-- price -->

                                <div class="price">
                                    <h4>Storyboarding<small>short description here</small></h4>

                                </div> <!-- price -->


                            </div> <!-- price timeline -->

这是我的css覆盖;

#price-timeline 
    {
        margin: 25px 0 60px; /* top, side, bottom */
        text-align: center;
    }

    #price-timeline .price {
        display: inline-block;
        width: 20%; /* stack against eachother; */
        margin: 0 2% 0 0;
        background: #f8f8f8;
        padding: 10px 20px 40px;
        position: relative;
        vertical-align: top;
    }

#price-timeline h4 {
    margin: 0 0 10px;
}

我在这里错过了什么来使文本对齐？

谢谢！

Answer 1

或者您可以设置填充

＆＃13;

＆＃13;

#price-timeline {
  margin: 25px 0 60px;
  /* top, side, bottom */
  text-align: center;
}

#price-timeline .price {
  display: inline-block;
  padding: 50px; /* added */
  /* stack against each other; */
  margin: 0 2% 0 0;
  background: #f8f8f8;
  padding: 10px 20px 40px;
  position: relative;
  vertical-align: top;
}

#price-timeline h4 {
  margin: 0 0 10px;
}

/* Put the <small> below the <hr> */
#price-timeline small {
  margin-top: 5px;
  display: block;
}

＆＃13;

<div id="price-timeline">
  <div class="price">
    <h4>Animation<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Illustration<small>short description here</small></h4>


  </div>
  <!-- price -->

  <div class="price">
    <h4>Video Editing<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Storyboarding<small>short description here</small></h4>

  </div>
  <!-- price -->


</div>
<!-- price timeline -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

很简单，在标题后使用<br/>

<h4>Animation<br/><small>short description here</small></h4>

Answer 3

您可以将word-wrap:break-word添加到.price，

  

自动换行：break-word - 用于指定浏览器是否存在   可能会破坏单词内的行以防止溢出时   否则牢不可破的字符串太长而无法容纳在其包含的框中。

#price-timeline > .price {
  display: inline-block;
  width: 20%; /* stack against eachother; */
  margin: 0 2% 0 0;
  background: #f8f8f8;
  padding:10px 20px 40px;
  word-wrap:break-word; /*Add this*/
}

Answer 4

我认为这是一个更好的解决方案，因为在.price DIV元素中添加填充并使小元素成为块级元素最终会在将更多文本添加到其中一个描述字段时使布局中断。我的建议是做以下事情：

1. 使用SASS，Less，语言添加固定宽度（或动态宽度） 等）到.price元素

2. 将小元素设为块级元素（但我也会添加一个     它的类如描述，否则所有的实例     element将继承该样式）并添加overflow-wrap：normal     用于添加自动换行。

以下是此解决方案的示例：

CSS

#price-timeline {
  margin: 25px 0 60px;
  /* top, side, bottom */
  text-align: center;
}

#price-timeline .price {
  display: inline-block;
  width:200px;
  /* stack against each other; */
  margin: 0 2% 0 0;
  background: #f8f8f8;
  padding: 10px 20px 40px;
  position: relative;
  vertical-align: top;
}

#price-timeline h4 {
  margin: 0 0 10px;
}

small {
 display:block;
 overflow-wrap: normal;
}

HTML

<div id="price-timeline">
  <div class="price">
    <h4>Animation<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Illustration<small>Proin elit leo, egestas at viverra quis, euismod in lorem. Nunc ac auctor sapien. Nunc porta placerat lorem ac dapibus. Mauris consectetur ex a ex congue, sed varius turpis imperdiet. Cras fermentum nisi dui, bibendum dictum velit commodo vitae. Vestibulum ut dui turpis. </small></h4>


  </div>
  <!-- price -->

  <div class="price">
    <h4>Video Editing<small>short description here</small></h4>

  </div>
  <!-- price -->

  <div class="price">
    <h4>Storyboarding<small>short description here</small></h4>

  </div>
  <!-- price -->


</div>
<!-- price timeline -->

当我在为此问题选择的原始解决方案中使用CSS时，我会在Firefox和Chrome中使用CSS。这是在增加其中一个描述字段中的单词数之后：



我还建议您查看flexbox以了解您要执行的操作，它将使创建列变得更加容易:)或使用类似Bootstrap 3的框架.Bootstrap有一个很好的组件，称为Panels，你可以用于此，但您必须将它们放在可以使用Bootstrap轻松完成的列中：http://getbootstrap.com/components/#panels

Answer 5

我根据您的要求编辑了我的答案。现在，如果要添加，可以添加大量文本。现在它并没有出现在你想要的灰盒子旁边。

＆＃13;

＆＃13;

#price-timeline {
	margin: 25px 0 60px; /* top, side, bottom */
	text-align: center;
}

#price-timeline .price {
	display: inline-block;
	width: 20%; /* stack against eachother; */
	margin: 0 2% 0 0;
	background: #f8f8f8;
	padding: 10px 20px 40px;
	position: relative;
	vertical-align: top;
	float:left;
}

#price-timeline h4 {
    margin: 0 0 10px;
	word-wrap:break-word;
}

.price small{
	word-wrap:break-word;		
}

＆＃13;

<div id="price-timeline">
    <div class="price">
        <h4>Animation<small>short description here</small></h4>

    </div> <!-- price -->

    <div class="price">
        <h4>Illustration<small>short description here</small></h4>

    </div> <!-- price -->

    <div class="price">
        <h4>Video Editing<small>short description here</small></h4>

    </div> <!-- price -->

    <div class="price">
        <h4>Storyboarding<br /><small>short description here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non haben</small></h4>

    </div> <!-- price -->


</div> <!-- price timeline -->

＆＃13;

＆＃13;

＆＃13;