如何在创世纪列中的img旁边垂直对齐文本? [英] How do I vertically align text next to img in Genesis columns?

问题描述

我研究了类似的问题，并尝试使用display:table-cell;内联块vertical-align:到处都是中间位置，但是我无法使它正常工作.在此示例创世纪主题页面(请看)中，它使用一半"演示了列的使用'和'first'CSS类.使用DevTools/Inspector，您可以像下面显示的那样在段落之前添加<img src="http://placehold.it/140x240">.也许在《创世纪》专栏中有一些事情使这件事变得比应做的难，或者更有可能我错过了显而易见的事情.

在第一列中，我需要将img显示在文本的左侧，而文本是垂直对齐的.我似乎找不到能做到这一点的组合.注意:我确实知道图像的高度-它不是动态的.我可以使用span代替P.

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>

解决方案

此处的关键是宽度的声明.即使将display设置为inline-block，默认情况下p的宽度也将为100％，因此您需要使用以下内容进行设置:

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
      This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
  </p>
</div>

注意添加到子级的类，现在应用CSS:

.OneHalfItem {
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}

.OneHalfText {
    width:calc(100% - 140px);
    padding:10px;
}

现在，它使用calc排列得井井有条.几件事:

• 这很容易，因为图片是固定宽度的；如果img size是可变的，则还需要声明其宽度(百分比或其他百分比)，然后根据该宽度计算p大小
• 我消除了img标记结尾与p标记开头之间的空白，因为默认情况下inline-block会在每个元素的右侧添加4px的空白.通过删除标签之间的空白，可以消除空白.

请注意，这仅适用于IE9 +(当然是真正的浏览器)，因此，如果您需要支持IE8-，则需要通过JS进行相同的宽度计算，但是很容易做到.

这里是一个jsFiddle来显示它的工作原理.

I've researched similar questions and tried using display:table-cell; inline-block; vertical-align:middle all over the place, but I can't get this to work. In this sample Genesis theme page (please look), it demos the use of columns using 'one-half' and 'first' CSS classes. Using DevTools/Inspector you can go in and add <img src="http://placehold.it/140x240"> before the paragraph like I've shown below. Maybe there's something in the Genesis columns that's making this harder than it should be, or more likely I'm missing the obvious.

In that first column I need the img to appear to the left of the text, while the text is vertically aligned. I can't seem to find out the combination that will do it. NB I do know the height of the image - it's not dynamic. I could use spans if easier in stead of P.

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>

解决方案

The key here is declaration of the widths. p by default will have 100% width even if you set the display to inline-block, so you need to set it up with something like this:

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
      This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
  </p>
</div>

Note the classes added to the children, with the CSS now applied:

.OneHalfItem {
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}

.OneHalfText {
    width:calc(100% - 140px);
    padding:10px;
}

Now it lines up nice and dandy, with the use of calc. Couple of things:

• This works easily because the picture is a fixed width; if the imgsize is variable, you need to declare it's width as well (a percentage or something), then calculate the p size based on that
• I eliminated the white space between the end of the img tag and the beginning of the p tag, because by default inline-block will add in a 4px margin to the right of each element. By removing the white space between the tags, it eliminates that empty margin.

Note that this will only work for IE9+ (and real browsers, of course), so if you need to support IE8- then you'll need to do the same kind of width calculation via JS, but easily done.

Here is a jsFiddle to show it working.

这篇关于如何在创世纪列中的img旁边垂直对齐文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！