文本对齐如何在 HTML/CSS 中工作
[英]How does text alignments work in HTML/CSS
问题描述
My Question is: How does alignment works for inline and inline-block elements?
我的问题是：对齐如何用于内联和内联块元素？ And how can I control this?我该如何控制？
My goal is to align the content of the div to the same as the previous Text.我的目标是将 div 的内容与之前的 Text 对齐。 But there is interesting alignment happen if you empty some elements or change their position.但是如果你清空一些元素或改变它们的位置，就会发生有趣的对齐。
It seem that the first character in the first-child of an inline/inline-block element is used to do the alignment on baseline.似乎内联/内联块元素的第一个子元素中的第一个字符用于在基线上进行对齐。 How can I specify which character or element is used for alignment?如何指定用于对齐的字符或元素？
<p>
<span>Text</span>
<span class="box">
<span class="icon">icon</span>
<span class="content">content</span>
</span>
</p>
Here is a fiddle to see what I mean: https://jsfiddle.net/u4kzhmpt/这是一个小提琴，看看我的意思： https : //jsfiddle.net/u4kzhmpt/
.box { border: 1px solid black; display: inline-flex; } .icon { display: inline-block; padding: 20px; border-radius: 50%; background: gray; } .content { flex: 1; background: yellow; padding: 0 10px; }
<p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content">content</span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="icon"></span> <span class="content">content</span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content"></span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="content">content</span> <span class="icon">icon</span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="content">content</span> <span class="icon"></span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="content"></span> <span class="icon">icon</span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="content"></span> <span class="icon"></span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content">content</span> </span> <span class="box"> <span class="icon"></span> <span class="content">content</span> </span> <span class="box"> <span class="icon">icon</span> <span class="content"></span> </span> <span class="box"> <span class="content">content</span> <span class="icon">icon</span> </span> <span class="box"> <span class="content">content</span> <span class="icon"></span> </span> <span class="box"> <span class="content"></span> <span class="icon">icon</span> </span> <span class="box"> <span class="content"></span> <span class="icon"></span> </span> </p>
2 个解决方案
解决方案1
0 2020-09-28 11:33:02
Try it.尝试一下。
CSS Flexbox - CSS flex-grow property :- CSS Flexbox - CSS flex-grow 属性：-
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. flex-grow属性指定该项目相对于同一容器内的其余灵活项目将增长多少。
we can get the same alignment with or without text.我们可以在有或没有文本的情况下获得相同的对齐方式。
.box { border: 1px solid black; display: inline-flex; } .icon { display: inline-block; padding: 20px; border-radius: 50%; background: gray; width:80px; height:80px; } .content { flex: 1; background: yellow; padding: 0 10px; } p{ display:flex;} p > *{flex:1;} p > span:first-child{flex-grow:inherit;}
<body> <p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content">content</span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="icon"></span> <span class="content">content</span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content"></span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="content">content</span> <span class="icon">icon</span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="content">content</span> <span class="icon"></span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="content"></span> <span class="icon">icon</span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="content"></span> <span class="icon"></span> </span> </p> <p> <span>Text</span> <span class="box"> <span class="icon">icon</span> <span class="content">content</span> </span> <span class="box"> <span class="icon"></span> <span class="content">content</span> </span> <span class="box"> <span class="icon">icon</span> <span class="content"></span> </span> <span class="box"> <span class="content">content</span> <span class="icon">icon</span> </span> <span class="box"> <span class="content">content</span> <span class="icon"></span> </span> <span class="box"> <span class="content"></span> <span class="icon">icon</span> </span> <span class="box"> <span class="content"></span> <span class="icon"></span> </span> </p> </body>
解决方案2
0 已采纳 2020-09-30 11:25:25
First how elements are aligned as sibling to inline elements.首先元素如何与内联元素对齐为兄弟元素。 The first Element is used to align to baseline.第一个元素用于对齐基线。 If the first element does not contain text the element itself is aligned on baseline.如果第一个元素不包含文本，则元素本身在基线上对齐。 If the first element contains text it will be aligned with that text.如果第一个元素包含文本，它将与该文本对齐。
I recently found a solution.我最近找到了一个解决方案。 But this requires a helper element (.align).但这需要一个辅助元素（.align）。
This element needs to be the first element in the Box to be able to align on the same baseline.该元素必须是 Box 中的第一个元素才能在同一基线上对齐。
<span class="box">
<span class="content align"></span>
<span class="icon">icon</span>
<span class="content">content</span>
</span>
It can be styled by its own or use the same class as the aligned content.它可以自己设置样式，也可以使用与对齐内容相同的类。 The element has to be invisible for the user and should also contain no content.该元素必须对用户不可见，并且不应包含任何内容。 The content is set to a zero-width-space.内容设置为零宽度空间。 Without content align will not work.没有内容对齐将不起作用。
.align {
margin-left: 0;
margin-right: 0;
border-left: 0;
border-right: 0;
padding-left: 0;
padding-right: 0;
width: 0;
}
.align::before {
content: "\200B";
}
If no additional element should be used it is also possible to add style to the box itself.如果不应该使用其他元素，也可以为框本身添加样式。
The box:before should be styled like the content with the additional invisibility part. box:before 的样式应该类似于带有附加不可见部分的内容。
.content, .box::before {
/* style like your content */
...
}
.box::before {
margin-left: 0;
margin-right: 0;
border-left: 0;
border-right: 0;
padding-left: 0;
padding-right: 0;
width: 0;
content: "\200B";
}
Maybe there are some more styles needed in special cases to set to zero width.也许在特殊情况下需要更多的样式来设置为零宽度。
overflow: hidden does not seem to work.溢出：隐藏似乎不起作用。 If overflow hidden is active, the alignment will not work anymore.如果溢出隐藏处于活动状态，则对齐将不再起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.