在图像旁边垂直对齐文字？

最新推荐文章于 2022-04-01 16:29:51 发布

asdfgh0077

最新推荐文章于 2022-04-01 16:29:51 发布

阅读量232

点赞数

文章标签： css vertical-alignment

原文链接：https://stackoom.com/question/23Ia/在图像旁边垂直对齐文字

版权

为什么不vertical-align: middle工作？但是， vertical-align: top 确实有效。

 span{ vertical-align: middle; }

 <div> <img src="http://lorempixel.com/30/30/" alt="small img" /> <span>Doesn't work.</span> </div>

#1楼

background:url(../images/red_bullet.jpg) left 3px no-repeat;

我通常使用3px代替top 。通过增加/减小该值，可以将图像更改为所需的高度。

#2楼

这段代码可在IE和FF中使用：

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

#3楼

例如，在jQuery mobile的按钮上，您可以通过将以下样式应用于图片来对其进行一些调整：

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

#4楼

使用line-height:30px作为跨度，以使文本与图像对齐：

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

#5楼

如此处所述，在接受的答案中使用的技术仅适用于单行文本（ demo ），而不适用于多行文本（ demo ）。

如果有人需要将多行文本垂直居中放置图像，可以采用以下几种方法（此CSS-Tricks文章启发了方法1和2）

方法＃1：CSS表（ FIDDLE ）（IE8 +（ caniuse ））

CSS：

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

方法2：容器上的伪元素（ FIDDLE ）（IE8 +）

CSS：

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

方法3：Flexbox（ FIDDLE ）（ caniuse ）

CSS （上面的小提琴包含供应商前缀）：

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

#6楼

多线解决方案：

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

适用于所有浏览器和ie9 +

#7楼

将div更改为flex容器：

div {display:flex;}

现在有两种方法可以使所有内容的对齐方式居中：

方法1：

div {align-items:center;}

演示

方法2：

div * {margin-top:auto; margin-bottom:auto;}

演示

在img上尝试使用不同的width和height值，在span上尝试使用不同的字体大小值，您会发现它们始终保留在容器的中间。

#8楼

您必须对两个元素应用vertical-align: middle ，以使其完美居中。

 <div> <img style="vertical-align:middle" src="http://lorempixel.com/60/60/"> <span style="vertical-align:middle">Perfectly centered</span> </div>

接受的答案的确将图标居中放置在其旁边文本的x高度的一半左右（如CSS规范中所定义）。如果文本的上升或下降部分仅在顶部或底部突出，那么这可能已经足够好了，但看起来可能有些偏离：

居中图标比较

左边是未对齐的文本，右边是如上所示的文本。可以在本文中找到有关vertical-align的实时演示。

有谁谈论过为什么vertical-align: top在场景中起作用？ 问题中的图像可能比文本高，因此定义了线框的顶部边缘。 vertical-align: top在span元素的顶部，然后将其放在行框的顶部。

vertical-align: middle和top vertical-align: middle之间在行为上的主要区别是，第一个相对于框的基线（放置在完成所有垂直对齐所需的位置，因此感觉很难预测）相对于框的基线移动元素，第二个相对于框的外部边界线框（更明显）。

#9楼

在所有这些答案中都没有看到有margin的解决方案，因此这是我对这个问题的解决方案。

仅当您知道图像的宽度时，此解决方案才有效。

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

#10楼

写下这些跨度属性

span{
    display:inline-block;
    vertical-align:middle;
}

使用display:inline-block; 当您使用vertical-align属性时，那些是关联的属性

#11楼

您可以使用display属性将图像设置为inline element

 <div> <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60"> <span style="vertical-align: middle; display: inline;">Works.</span> </div>

#12楼

首先，根本不建议使用内联CSS ，它会弄乱您的HTML。

为了对齐图像和跨度，您可以简单地执行vertical-align:middle 。

 .align-middle { vertical-align: middle; }

 <div> <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png"> <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span> </div>

#13楼

我同意，这可能会造成混淆。尝试利用表格功能。我使用这个简单的CSS技巧将模式放置在网页的中心。它具有较大的浏览器支持：

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

和CSS部分：

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

请注意，您必须设置样式并调整图像和表格容器的大小，以使其按需工作。请享用。

#14楼

因为您必须将line-height设置为div的高度才能起作用

#15楼

您可能想要这样：

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

正如其他人所建议的，请尝试在图像上vertical-align ：

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS并不令人讨厌。您只是不阅读文档。 ; P

#16楼

实际上，在这种情况下，这非常简单：对图像应用垂直对齐。由于所有内容都在同一行中，因此它实际上是您要对齐的图像，而不是文本。

 <!-- moved "vertical-align:middle" style from span to img --> <div> <img style="vertical-align:middle" src="https://placehold.it/60x60"> <span style="">Works.</span> </div>

在FF3中测试。

现在，您可以将flexbox用于这种类型的布局。

 .box { display: flex; align-items:center; }

 <div class="box"> <img src="https://placehold.it/60x60"> <span style="">Works.</span> </div>

#17楼

以下是一些用于垂直对齐的简单技术：

单行垂直对齐：中间

这很简单：将text元素的line-height设置为等于容器的高度

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

多行垂直对齐：底部

相对于其容器绝对定位内部div

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

多行垂直对齐：中间

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

如果必须支持IE <= 7的旧版本

为了使它能够全面正常工作，您必须稍微修改一下CSS。幸运的是，有一个IE错误对我们有利。在容器上设置top:50% ，在内部div上设置top:50% top:-50% ，您可以获得相同的结果。我们可以使用IE不支持的另一功能将两者结合：高级CSS选择器。

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可变容器高度垂直对齐：中间

该解决方案使用了transform: translateY属性，因此它需要比其他解决方案更现代的浏览器。（ http://caniuse.com/#feat=transforms2d ）

将以下3行CSS应用于元素将使其在父元素内垂直居中，而不考虑父元素的高度：

position: relative;
top: 50%;
transform: translateY(-50%);

#18楼

不确定为什么它不能在导航的浏览器中呈现，但是当试图显示带有图像和居中文本的标题时，我通常使用这样的代码段，希望对您有所帮助！

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

#19楼

作为记录，对齐“命令”在SPAN上不起作用，因为它是行内标签，而不是块级标签。诸如对齐，边距，填充等之类的内容在行内标签上不起作用，因为行内点不是为了干扰文本流。

CSS将HTML标签分为两组：内联和块级。搜索“ css块与内联”，然后出现一篇很棒的文章...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

（了解CSS的核心原理是使其不那么令人讨厌的关键）

#20楼

基本上，您必须开始使用CSS3。

-moz-box-align: center;
-webkit-box-align: center;

#21楼

您可以做的另一件事是将文本的line-height设置为<div>图像的大小。然后将图像设置为vertical-align: middle;

这是最简单的方法。

asdfgh0077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫