当前位置： 文江博客话题详情

垂直对齐图像旁边的文本？

发布于 2024-07-12 08:16:09 字数 453 浏览 8 评论 0原文

为什么 vertical-align: middle 不起作用？ 然而，vertical-align: top 确实有效。

span{
  vertical-align: middle;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

原文

Why won't vertical-align: middle work? And yet, vertical-align: top does work.

span{
  vertical-align: middle;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（26）

_畞蕅 2024-07-19 08:16:09

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

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

在 FF3 中测试。

现在您可以使用 Flexbox 来实现这种类型的布局。

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

Tested in FF3.

Now you can use flexbox for this type of layout.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

回复 原文
岁月蹉跎了容颜 2024-07-19 08:16:09

下面是垂直对齐的一些简单技巧：

单行vertical-align:middle

这个很简单：将文本元素的行高设置为等于容器的行高

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

多行vertical-align:bottom

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

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

多行 Vertical-align:middle

<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% ，可以获得相同的结果。 我们可以使用 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>

可变容器高度vertical-align:middle

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

将以下 3 行 CSS 应用到无论父元素的高度如何，元素都会在其父元素中垂直居中：

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

Here are some simple techniques for vertical-align:

One-line vertical-align:middle

This one is easy: set the line-height of the text element to equal that of the container

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

Multiple-lines vertical-align:bottom

Absolutely position an inner div relative to its container

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

Multiple-lines vertical-align:middle

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

If you must support ancient versions of IE <= 7

In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.

<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>

Variable container height vertical-align:middle

This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)

Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:

position: relative;
top: 50%;
transform: translateY(-50%);
回复 原文
浸婚纱 2024-07-19 08:16:09

将 div 更改为 Flex 容器：

div { display: flex; }

Now there are two methods to center the alignments for all the content:

方法 1：

div { align-items: center; }

DEMO

方法2：

div * { margin: auto 0; }

DEMO< /a>

在 img 上尝试不同的宽度和高度值，在 span 上尝试不同的字体大小值，您会发现它们始终保持在中间容器。

Change your div into a flex container:

div { display: flex; }

Now there are two methods to center the alignments for all the content:

Method 1:

div { align-items: center; }

DEMO

Method 2:

div * { margin: auto 0; }

DEMO

Try different width and height values on the img and different font size values on the span and you'll see they always remain in the middle of the container.

回复 原文
栩栩如生 2024-07-19 08:16:09

您必须对两个元素应用 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 高度的一半周围（如 < a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" rel="noreferrer">CSS 规范）。 这可能已经足够好了，但如果文本在顶部或底部有突出的上升部或下降部，则看起来可能会有点偏差：

居中图标比较

左边的文字没有对齐，右边的如上图。 可以在这篇有关vertical-align的文章中找到现场演示< /a>.

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

vertical-align: middle 和 top 之间行为的主要区别在于，第一个相对于框的基线移动元素（该基线放置在需要实现所有垂直对齐的位置，并且因此感觉相当不可预测），第二个相对于行框的外部边界（更具体）。

You have to apply vertical-align: middle to both elements to have it been centered perfectly.

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

The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:

centered icon comparison

On the left, the text is not aligned, on the right it is as shown above. A live demo can be found in this article about vertical-align.

Has anyone talked about why vertical-align: top works in the scenario? The image in the question is probably taller than the text and thus defines the top edge of the line box. vertical-align: top on the span element then just positions it at the top of the line box.

The main difference in behavior between vertical-align: middle and top is that the first moves elements relative to the box's baseline (which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable) and the second relative to the outer bounds of the line box (which is more tangible).

回复 原文
↘紸啶 2024-07-19 08:16:09

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

如果有人需要将多行文本垂直居中到图像中，这里有几种方法
（方法 1 和 2 的灵感来自这篇 CSS-Tricks 文章）

方法#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< /a>)

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

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

The technique used in the accepted answer works only for single-lined text (demo), but not multi-line text (demo) - as noted there.

If anyone needs to vertically center multi-lined text to an image, here are a few ways
(Methods 1 and 2 inspired by this CSS-Tricks article)

Method #1: CSS tables (FIDDLE) (IE8+ (caniuse))

CSS:

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

Method #2: Pseudo element on container (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 */
}

Method #3: Flexbox (FIDDLE) (caniuse)

CSS (The above fiddle contains vendor prefixes):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}
回复 原文
〆一缕阳光ご 2024-07-19 08:16:09

此代码适用于 IE 和 FF：

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

This code works in IE as well as FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>
回复 原文
唠甜嗑 2024-07-19 08:16:09

因为您必须将 line-height 设置为 div 的高度才能正常工作

Because you have to set the line-height to the height of the div for this to work

回复 原文
爺獨霸怡葒院 2024-07-19 08:16:09

根据记录，对齐“命令”不应在 SPAN 上工作，因为它是内联标记，而不是块级标记。 对齐、边距、填充等内容在内嵌标签上不起作用，因为内联的目的不是破坏文本流。

CSS 将 HTML 标记分为两类：内联标记和块级标记。 搜索“css block vs inline”，就会出现一篇很棒的文章...

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

（理解核心 CSS 原则是让它不那么烦人的关键）

For the record, alignment "commands" shouldn't work on a SPAN, because it is an in-line tag, not a block-level tag. Things like alignment, margin, padding, etc won't work on an in-line tag because the point of inline is not to disrupt the text flow.

CSS divides HTML tags up into two groups: in-line and block-level. Search "css block vs inline" and a great article shows up...

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

(Understanding core CSS principles is a key to it not being quite so annoying)

回复 原文
十年不长 2024-07-19 08:16:09

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

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

Basically, you'll have to get down to CSS3.

-moz-box-align: center;
-webkit-box-align: center;
回复 原文
小苏打饼 2024-07-19 08:16:09

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

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

Use line-height:30px for the span so that text is align with the image:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>
回复 原文
所有深爱都是秘密 2024-07-19 08:16:09

您可以做的另一件事是将文本的 line-height 设置为

中图像的大小。 然后将图像设置为 vertical-align: middle;

这确实是最简单的方法。

Another thing you can do is set the text's line-height to the size of the images within the <div>. Then set the images to vertical-align: middle;

That's seriously the easiest way.

回复 原文
想念有你 2024-07-19 08:16:09

在这些答案中还没有看到带有 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;
}

Haven't seen a solution with margin in any of these answers yet, so here is my solution to this problem.

This solution only works if you know the width of your image.

The 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>

The 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;
}
回复 原文
洋洋洒洒 2024-07-19 08:16:09

编写这些跨度属性

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

使用 display:inline-block; 当您使用 vertical-align 属性时。这些是关联属性

Write these span properties

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

Use display:inline-block; When you use vertical-align property.Those are assosiated properties

回复 原文
过期情话 2024-07-19 08:16:09
background:url(../images/red_bullet.jpg) left 3px no-repeat;

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

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

I generally use 3px in place of top. By increasing/decreasing that value, the image can be changed to the required height.

回复 原文
错爱 2024-07-19 08:16:09

您可以使用 display 属性将图像设置为内联元素

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

You can set image as inline element using display property

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

回复 原文
依 靠 2024-07-19 08:16:09

使用 flex 属性 CSS。

如果要在 Flex 中使用 align-items:center; 来垂直居中对齐文本（如果您想在 Flex 中使用 < 来水平居中对齐文本）代码>justify-content:center;.

div{
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

使用 table-cell在CSS中。

div{
  display: table;
}
div *{
  display: table-cell;
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

Using flex property in css.

To align text vertically center by using in flex using align-items:center; if you want to align text horizontally center by using in flex using justify-content:center;.

div{
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

Using table-cell in css.

div{
  display: table;
}
div *{
  display: table-cell;
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

回复 原文
辞慾 2024-07-19 08:16:09

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

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

On a button in jQuery mobile, for instance, you can tweak it a bit by applying this style to the image:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}
回复 原文
红衣飘飘貌似仙 2024-07-19 08:16:09

多行解决方案：

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+

Multiline solution:

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 -->

Works in all browers and ie9+

回复 原文
猥︴琐丶欲为 2024-07-19 08:16:09

我同意，这可能会令人困惑。 尝试利用表格功能。 我使用这个简单的 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; }

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

It can be confusing, I agree. Try utilizing table features. I use this simple CSS trick to position modals at the center of the webpage. It has large browser support:

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

and CSS part:

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

Note that you have to style and adjust the size of image and table container to make it work as you desire. Enjoy.

回复 原文
抱猫软卧 2024-07-19 08:16:09

使用 align-items: center; 显示 Flex 是垂直对齐项目的最佳方式

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>it works.</span>
</div>

Display flex with align-items: center; is the best way for vertically align the items

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>it works.</span>
</div>

回复 原文
看轻我的陪伴 2024-07-19 08:16:09
div {
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

div {
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

回复 原文
已下线请稍等 2024-07-19 08:16:09

首先，根本不推荐内联CSS，它真的会弄乱你的HTML。

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

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.sstatic.net/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Firstly inline CSS is not recommended at all, it really mess up your HTML.

For aligning image and span, you can simply do vertical-align:middle.

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.sstatic.net/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

回复 原文
慵挽 2024-07-19 08:16:09

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

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>

Not sure as to why it doesn't render it on your navigation's browser, but I normally use an snippet like this when trying to display a header with an image and a centered text, hope it helps!

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>
回复 原文
旧城空念 2024-07-19 08:16:09

到 2022 年，随着近 96% 无前缀浏览器支持，我很惊讶没有人建议使用网格布局。

在 这个 JSFiddle 中，实现 OP 目标所需的全部是 3 行（但是多重对齐是用于比较）：

div {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center
}

额外的 UI 细节包括可选地使用 gap 属性，该属性可以调节每个 grid-item 位于父级网格容器 (div)。

网格布局的优点

  1. 网格项目的简单垂直和水平对齐网格
  2. 项目之间的空间调节
  3. 任何尺寸的图像（使用min-content）和文本长度（使用 max-content 一行或使用 min-content 换行（未在小提琴中显示））可以工作 - 无需对图像尺寸进行硬编码CSS（这两种用法都在 JSFiddle 中演示）
  4. 现代方法

网格布局的缺点

  1. 较旧的浏览器支持更具挑战性
  2. 网格布局通常需要更有经验的开发人员才能正确实现 - 而不是就像block/inline-block 显示一样简单

In 2022 and with nearly 96% unprefixed browser support, I'm surprised no one has suggested the use of a grid layout.

In this JSFiddle, 3 lines are all that are necessary to achieve the OP's objective (but multiple alignments are presented for comparison):

div {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center
}

An additional UI nicety would include the optional use of the gap property, which enables modulation of the space between each grid-item within the parent grid container (div).

Advantages of grid layout

  1. Easy vertical AND horizontal alignment of grid-items
  2. Modulation of space between grid-items
  3. Any size image (using min-content) and text length (one line using max-content or wrapped (not shown in fiddle) using min-content) would work - no need to hard-code the image dimensions in the CSS (both usages demonstrated in the demonstrated in JSFiddle)
  4. Modern approach

Disadvantages of grid layout

  1. Older browser support is more challenging
  2. Grid layouts generally require more experienced developers to implement properly - not as simple as block/inline-block display
回复 原文
不疑不惑不回忆 2024-07-19 08:16:09
<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>
回复 原文
稀香 2024-07-19 08:16:09

您可能想要这样：

<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

You probably want this:

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

As others have suggested, try vertical-align on the image:

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

CSS isn't annoying. You just don't read the documentation. ;P

回复 原文
~没有更多了~

关于作者

别理我

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_FjTq5B

文章 0 评论 0

18273202778

文章 0 评论 0

WordPress小学生

文章 0 评论 0

〃温暖了心ぐ

文章 0 评论 0

迷乱花海

文章 0 评论 0

niuniu

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文