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

为什么不垂直对齐：中间工作？然而，垂直对齐：顶部确实有效。

跨度{垂直对齐：中间；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>

当前回答

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

2020-06-06 18:45:04

其他回答

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

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>

2019-11-05 05:21:33

2022年，浏览器支持率达到96%，我很惊讶没有人建议使用网格布局。

在本JSFiddle中，3行是实现OP目标所需的全部内容（但提供了多条路线以供比较）：

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

一个额外的UI细节将包括可选的gap属性的使用，该属性允许调整父网格容器（div）中每个网格项之间的空间。

网格布局的优势

轻松垂直和水平对齐网格项网格项之间的空间调制任何大小的图像（使用最小内容）和文本长度（使用最大内容的一行或使用最小内容的换行（未在fiddle中显示））都可以工作-无需在CSS中硬编码图像尺寸（两种用法都在JSFiddle中演示）现代方法

网格布局的缺点

较旧的浏览器支持更具挑战性网格布局通常需要更有经验的开发人员来正确实现，而不是像块/内联块显示那样简单

2022-02-28 03:18:08

对于记录，对齐“命令”不应该在SPAN上工作，因为它是一个内嵌标记，而不是块级标记。对齐、边距、填充等功能在内联标记上不起作用，因为内联的目的是不中断文本流。

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

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

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

2011-11-18 13:24:05

在这些答案中还没有找到一个有余量的解决方案，所以这里是我对这个问题的解决方案。

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

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

2016-04-10 11:26:02

写下这些跨度财产

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

使用显示：内联块；当您使用vertical-align属性时。这些是关联的财产

2016-11-08 06:26:18

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

推荐文章

最新文章

标签