Question

我有HTML代码，我想在li - 元素中对齐内容。我在li - 元素中有图像和文字信息。

我为vertical-align: middle - 元素尝试li，但它不起作用

＆＃13;

li img {
  float: left;
  display: block;
  margin-right: 20px;
  margin-bottom: 15px;
  width: 75px;
  height: 75px;
}

＆＃13;

<ul>
  <li>
    <img src="images/1.jpg" alt="">
    <a class="post-title" href="#">Lorem Ipsum</a>
    <p class="post-date">March 05, 2015</p>
  </li>
  <li>
    <img src="images/1.jpg" alt="">
    <a class="post-title" href="#">Lorem Ipsum</a>
    <p class="post-date">March 05, 2015</p>
  </li>
</ul>

＆＃13;

Answer 1

您可以稍微更改HTML并使用.directive('basicClick', function($parse, $rootScope) { return { compile: function(elem, attr) { var fn = $parse(attr.basicClick); return function(scope, elem) { elem.on('click', function(e) { fn(scope, {$event: e}); scope.$apply(); }); }; } }; });技巧。 Flexbox也可能需要考虑一下，认为它还没有被广泛支持。

<强> HTML

display:table-cell

<强> CSS

<ul>
    <li>
        <div>
            <img src="images/1.jpg" alt="">
            <a class="post-title" href="#">Lorem Ipsum</a>
            <p class="post-date">March 05, 2015</p>
        </div>
    </li>
    <li>
        <div>
            <img src="images/1.jpg" alt="">
            <a class="post-title" href="#">Lorem Ipsum</a>
            <p class="post-date">March 05, 2015</p>
        </div>
    </li>
</ul>

fiddle example

里面的内容垂直对齐

1 个答案: