Question

我正在开发一个简单的html / css网页。我想要做的是拥有一个图像和一个div。两者都是内联显示，在div中我想要一个链接。但是当我把长链接标题放在一起时，它并不是我所期望的那样。我的代码是这个 - code

    <div class="heading"> featured posts
    </div>
    <div class="img_src">
        <img style="height:120px;" src="/uploads/1.jpg"></img>
    </div>
    <div class="link_src">
        <a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
    </div>
</div>

CSS -

.img_src{
    display: inline-block;
    margin-top: 3px;
    margin-left:-2%;
}
.link_src{
    display: inline-block;
    background-color: white;
    height: 120px;
    line-height: 120px;
    width: 61%;
    margin-top: 3px;
    text-transform: uppercase;
}
.inside_link{
    margin-left: 2%;
    margin-right: 2%;
    font-size: 15px;
}




.heading{
    display: block;
    background-color: #000;
    color: #fff;
    font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
    font-size: 20px;
    margin-top:5px;
    font-color:white;
    margin-left:-2%;
    margin-right:-2%;
    text-align: center;
    line-height: 40px;
    height: 40px;
    font-style: oblique;
    text-transform: uppercase;
}

我搜索了谷歌和StackOverflow，但我没有得到任何有用的东西。我希望它看起来像这样（DIV包装完整） -

有什么建议吗？

Answer 1

您可以通过将inline-block显示更改为table-cell，然后在文本容器上应用vertical-align:middle;属性来实现此目的。

这样，如果有一行，两行，三行内容，文本将完全垂直居中。

.parent{
  display: table;
  border: 5px solid #ccc;
  width: 100%;
}   
.img_src{
  display: table-cell;
}
.link_src{
  display: table-cell;
  vertical-align: middle;
  background-color: white;
  width: 61%;
  text-transform: uppercase;
}

See this fiddle

Answer 2

您使用diplay:table-cell代替inline-block，但我也通过添加包含图片和标题的div.post在html中进行编辑，并删除了为图片赋予高度的内联样式< / p>

<div class="post">


  <div class="img_src">
    <img  src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg">
  </div>
  <div class="link_src">
    <a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
  </div>


</div>

在css中，我将width:20%;提供给.img_src，将width:80%;提供给.link_src（您可以根据需要更改宽度）并从中移除高度和线条高度并且diplay:table-cell将处理这些高度

.post{
  font-size:0;
  display:table;
  width:100%;
}
.img_src{
    display: table-cell;
    vertical-align:top;
    width:20%;
}
.img_src img{
  width:100%;
}
.link_src{
    display: table-cell;
    background-color: white;
    margin-top: 3px;
    text-transform: uppercase;
    vertical-align:middle;
    width:80%;
}
.inside_link{
    margin-left: 2%;
    margin-right: 2%;
    font-size: 15px;
}




.heading{
    display: block;
    background-color: #000;
    color: #fff;
    font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
    font-size: 20px;
    margin-top:5px;
    font-color:white;
    margin-left:-2%;
    margin-right:-2%;
    text-align: center;
    line-height: 40px;
    height: 40px;
    font-style: oblique;
    text-transform: uppercase;
}

https://jsfiddle.net/IA7medd/gg7ygdLs/17/

Answer 3

好的，你使用的是错误的方法。线高导致问题。你的HTML应该是这样的

<img class="img_src" style="height:120px;" src="/uploads/1.jpg">
        <div class="link_src">
            <div class="inner_link_src">
                <div class="inner_margin">
                    <a href="#">Link will go here but if there is a long title then it may create some problems..</a>
                </div>
            </div>
        </div>

和你的css一样

.img_src{
    float:left
}

.link_src{
    float:left;
    position:relative;
    width: 61%;
    text-transform: uppercase;
    background-color: white;
    vertical-align: top;
    display:table;
    height:120px;
}

.inner_link_src{
    display:table-cell;
    width:100%;
    height:100%;
    vertical-align:middle;
  margin-left:10px;
}

.inner_margin{
    margin-left:10px;
}

看到jsfiddle它工作得很好

https://jsfiddle.net/gg7ygdLs/27/

Answer 4

您只需按照以下方式更改 CSS 和 HTML ，即可获得所需的结果。

<强> CSS：

 .img_src{

    display: inline-block;
    margin-top: 3px;
    margin-left:-2%;
}
.link_src{
    display: inline-block;
    background-color: white;
    height: 120px;
    width: 100%;
    margin: 10px 0 10px 3px;
    -webkit-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
    -moz-box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
    box-shadow: 7px 0px 0px 3px rgba(204,204,204,1);
}
.inside_link{
    margin: 2%;
    display: inline-block;
    position:absolute;
    padding: 8px;
}




.heading{
    display: block;
    background-color: #000;
    color: #fff;
    font-family: "Roboto Condensed","HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
    font-size: 20px;
    margin-top:5px;
    font-color:white;
    margin-left:-2%;
    margin-right:-2%;
    text-align: center;
    line-height: 40px;
    height: 40px;
    font-style: oblique;
    text-transform: uppercase;
}

<强> HTML：

 <div class="heading"> featured posts
    </div>

    <div class="link_src">
   <img style="height:120px;" src="http://smashinghub.com/wp-content/uploads/2011/11/Text-Shadow-Box.jpg" />
    <a class="inside_link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
    </div>

Demo

Answer 5

使用Flexbox可以大大简化代码。

您也可以将它用作标题，以标题为中心。

.your-header {
   display: flex;
   align-items: center;
   justify-content: center;
}

然后是图像容器。使用它更具语义性，它是一个块元素，非常适合用你的案例中的标题或链接包装图像：

<figure class="your-figure">
  <img class="your-image" src="http://pipsum.com/200x150.jpg"></img>
  <a class="your-link" href="#">Link will go here but if there is a long title then it may create some problems..</a>
</figure>

和CSS

.your-figure {
    display: flex;
    align-items: center;
    padding: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.your-image {
    margin-right: 10px;
}

查看完整代码的here;）

如果您不了解Flexbox，请遵循此步骤，一开始可能看起来令人生畏，但当它点击您的头脑时会改变您的生活:) Complete guide to Flexbox

显示带有div的图像，可以包装链接

5 个答案: