将标题文本的位置设置在CSS中的其他内容正上方 [英] Setting position of the header text right above the other content in CSS

问题描述

此问题与上述主题相关这里。
我设法修复我以前的CSS代码，以获得文本对齐到图片的中间的效果，但现在我想添加一个标题到文本。我的问题是，我有对齐标题的麻烦，目前它看起来像这样： https://jsfiddle.net/u8db2j75/ ，但我想实现这样的效果： http://i.imgur.com /fFuohml.png 其中标题文本在正常文本的正上方。我不知道为什么在我的解决方案中有这个巨大的差距之间的标题和文本。你能帮我解决我的问题吗？我当前的CSS代码如下：

  * {
 box-sizing：border-box; 
} 
 .container {
 width：100％; 
 max-width：60rem; 
 / * 960 * / 
 margin：0 auto; 
} 
 .item {
 width：100％; 
 overflow：hidden; 
 margin-bottom：5rem; 
 display：table; 
 / * 80 * / 
} 
 .item__img，
 .item__info {
 width：50％; 
 display：table-cell; 
 vertical-align：middle; 
} 
 .item__img {} .item__img .img-map {
 width：95％; 
 height：18.750rem; 
 / * 300 * / 
} 
 .item__img img {
 width：95％; 
 height：18.750rem; 
 / * 300 * / 
} 
 h2 {
 font-weight：normal; 
 font-size：4rem; 
 / * 64 * / 
 text-align：left; 
} 
  

，目前的HTML代码是：

 < div class =containerrole =main> 
 
< article class =item> 
 
< div class =item__img> 
< div class =img-map> 
< img src =http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg/> 
< / div> 
< / div> 
< div class =item__info> 
< h2> HEADER< / h2> 
< p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Aliquam ac sodales orci。 Praesent坐amet后续purus。 Praesent lobortis mi quis rut​​rum fringilla。 us lit lit u。。。。。。。。。。。。。。。。。 Vestibulum 
 vel congue felis，ut lacinia tellus。整体ullamcorper gravida ligula非convallis。 Ut suscipit vulputate erat eu porttitor。 Morbi sagittis vulputate bibendum。 Aliquam ultricies finibus tortor，一种元素等分。在sed dui id mauris 
 rutrum ornare。< / p> 
< / div> 
 
< / article> 
< / div> 
  

$ b

谢谢！

解决方案

当您有一个标题后跟一个段落时，有（通常）不超过4个样式声明，在标题和段落之间创建一个可见的垂直间隙。这4个样式声明是（按顺序）：

1）标题的 padding-bottom p>

2）标题的 margin-bottom ;

3）该段落的 margin-top ;

4） padding- top ;

对于更高级的布局，可以使用 line-height 也会起作用，但我们现在不需要担心。

因此，如果您想确保是第二级标题和其后的段落之间的零可见间隙，您可以声明以下规则：

  h2 { 
 margin-bottom：0; 
 padding-bottom：0; 
} 
 
 p {
 margin-top：0; 
 padding-top：0; 
} 
  

当然，如果我们离开它，上面段落的样式规则将应用于所有段落。如果我们希望这些样式规则只对< h2> 之后的段落应用，那么我们可以使上面的样式通过声明：

  h2 {
 margin-bottom：0; 
 padding-bottom：0; 
} 
 
 h2 + p {
 margin-top：0; 
 padding-top：0; 
} 
  

+ 以上表示规则仅适用于选择器之后的元素，当它是紧跟在选择器之前的元素的同级时。

现在，在< h2> 和< p> ，您可以根据需要调整边距和paddings。

This issue is related to the topic mentioned here. I managed to fix my previous CSS code to get the effect of having text aligned to the middle of the picture, but now I would like to add a header to the text. My problem is that I have troubles with aligning the header, currently it looks like this: https://jsfiddle.net/u8db2j75/ , but I would like to achieve the effect like this: http://i.imgur.com/fFuohml.png where the header text is right above the normal text. I don't know why in my solution there's this huge gap between the header and the text. Could you help me with my issue? My current css code is as follows:

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  max-width: 60rem;
  /* 960 */
  margin: 0 auto;
}
.item {
  width: 100%;
  overflow: hidden;
  margin-bottom: 5rem;
  display:table;
  /* 80 */
}
.item__img,
.item__info {
  width: 50%;
  display:table-cell;
  vertical-align:middle;
}
.item__img {} .item__img .img-map {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
.item__img img {
  width: 95%;
  height: 18.750rem;
  /* 300 */
}
h2 {
    font-weight: normal;
    font-size: 4rem;
    /* 64 */
    text-align: left;
}

and current html code is this:

<div class="container" role="main">

  <article class="item">

    <div class="item__img">
      <div class="img-map">
        <img src="http://biologypop.com/wp-content/uploads/2014/11/dog1.jpg" />
      </div>
    </div>
    <div class="item__info">
    <h2>HEADER</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac sodales orci. Praesent sit amet consequat purus. Praesent lobortis mi quis rutrum fringilla. Phasellus velit arcu, ultricies vestibulum varius sed, convallis ut eros. Vestibulum
        vel congue felis, ut lacinia tellus. Integer ullamcorper gravida ligula non convallis. Ut suscipit vulputate erat eu porttitor. Morbi sagittis vulputate bibendum. Aliquam ultricies finibus tortor, a elementum nisl aliquet at. In sed dui id mauris
        rutrum ornare.</p>
    </div>

  </article>
</div>

Thanks!

解决方案

When you have a heading followed by a paragraph, there are (generally) no more than 4 style declarations that create a visible vertical gap between the heading and the paragraph. These 4 style declarations are (in order):

1) The padding-bottom of the heading;

2) The margin-bottom of the heading;

3) The margin-top of the paragraph;

4) The padding-top of the paragraph;

With more advanced layouts, declarations like line-height will also play a role, but we don't need to worry about that for now.

Therefore, if you want to ensure that there is zero visible gap between the second-level heading and the paragraph which follows it, you might declare the following rules:

h2 {
margin-bottom: 0;
padding-bottom: 0;
}

p {
margin-top: 0;
padding-top: 0;
}

Of course, if we leave it there, the style rules for the paragraph above will apply to all paragraphs. If we want these style rules to apply only to paragraphs which immediately follow an <h2>, then we can make the styles above slightly more explicit by declaring:

h2 {
margin-bottom: 0;
padding-bottom: 0;
}

h2 + p {
margin-top: 0;
padding-top: 0;
}

The + selector above indicates that the rules only apply to the element after the selector when it is the sibling which immediately follows the element before the selector.

Now that you have zero visible gap between the <h2> and the <p>, you can tweak your margins and paddings as appropriate.

这篇关于将标题文本的位置设置在CSS中的其他内容正上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！