html - 将元素居中直到内容足够长,然后对齐到顶部?
问题描述
我有一组项目在下面显示一个带有标题+文本的图标(图像)。
这主要工作正常。但是在某些页面上,每个项目没有一段文本,只有一个标题。因此,当图标仅在标题旁边水平显示时,当标题与顶部对齐时,它看起来很奇怪。
我的问题是,是否可以将图标与文本居中,直到内容足够高以到达图标/容器的顶部?
标题+文字示例(1):https ://codepen.io/moy/pen/YOZyeG
只有标题 (2) 的示例:https ://codepen.io/moy/pen/RYpWBp
正如您在移动设备上的示例 (1) 中看到的那样,图标在文本填充时响应良好。
在第二个示例 (2) 中,标题位于图标的顶部,看起来有点垃圾!
我尝试将标题与图标垂直居中,但是当添加文本时,它看起来很奇怪。那么是否可以将图标居中,直到标题/文本占用足够的垂直空间来击中容器的顶部,然后它只是顶部对齐?
或者我是否需要有 2 个不同的类,比如.features
然后.features--centred
或者.features--no-text
内容不多的项目?
在此先感谢,在这里打结!
/**
* Base `html` styling.
*/
html {
background: white;
font-size: 62.5%;
}
/**
* Base `body` styling.
*/
body {
background-color: white;
color: grey;
font-family: "Roboto", sans-serif;
font-size: 13px;
font-size: 1.3rem;
font-weight: 400;
line-height: 1.8;
margin: 0;
padding: 30px 0 0;
text-rendering: optimizeLegibility;
}
@media (min-width: 64em) {
body {
font-size: 14px;
font-size: 1.4rem;
}
}
/* ==========================================================================
#FEATURES
========================================================================== */
/**
* Features/service panel. Each item has an icon, title and short text entry.
*
* 1. The number of items can change from 5 - 6, so I've set flex-direction to
* 'row' on desktop (when the items are in a row) so the items will always be
* spaced evenly.
* 2. Need to overwrite `align-items` so the icons are vertically aligned to the
* top of the container.
*/
.features {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
.features:before,
.features:after {
content: "";
display: table;
}
.features:after {
clear: both;
}
@media (min-width: 48em) {
.features {
display: block;
margin-left: -30px;
}
}
@media (min-width: 64em) {
.features {
margin-left: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
}
}
/**
* The wrapper for each featured item that contains an icon, title and short
* sentence.
*
* 1. I've removed the width, which was always 20% as there were always 5 items
* but now that can change and we've added `flex-direction: row;` to the
* parent div we shouldn't need it.
* 2. Make items have equal widths. If not applied they'll be uneven.
*
*/
.features__item {
background: none;
box-sizing: border-box;
margin: 0;
padding: 0 0 0 65px;
width: 100%;
max-width: 500px;
}
.features__item:before,
.features__item:after {
content: "";
display: table;
}
.features__item:after {
clear: both;
}
@media (min-width: 48em) {
.features__item {
float: left;
padding: 0 0 0 95px;
width: 50%;
max-width: none;
}
.features__item:nth-child(odd) {
clear: left;
}
}
@media (min-width: 64em) {
.features__item {
flex-grow: 1;
flex-basis: 0;
text-align: center;
padding: 0 15px;
width: auto;
}
.features__item:nth-child(odd) {
clear: none;
}
}
.features__icon-wrap {
background-color: teal;
border-radius: 100%;
display: inline-block;
height: 50px;
line-height: 50px;
margin: 0 0 30px -65px;
float: left;
text-align: center;
width: 50px;
}
.features__icon-wrap .icon {
fill: white;
height: 25px;
width: 25px;
}
@media (min-width: 64em) {
.features__icon-wrap {
float: none;
margin-left: 0;
height: 100px;
line-height: 100px;
width: 100px;
}
.features__icon-wrap .icon {
height: 50px;
width: 50px;
}
}
.features__title {
color: black;
font-size: 14px;
font-size: 1.4rem;
font-weight: 900;
margin-bottom: 7.5px;
}
@media (min-width: 64em) {
.features__title {
font-size: 16px;
font-size: 1.6rem;
}
}
.features__text {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.4;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900|Roboto:400,400i,700,700i" rel="stylesheet">
<ul class="features">
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--24-hour"><use xlink:href="img/sprite/sprite.svg#icon-24hour"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--room"><use xlink:href="img/sprite/sprite.svg#icon-room"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--rosette"><use xlink:href="img/sprite/sprite.svg#icon-rosette"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--taxi"><use xlink:href="img/sprite/sprite.svg#icon-taxi"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--ticket"><use xlink:href="img/sprite/sprite.svg#icon-ticket"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet.</p>
</li>
</ul>
解决方案
你可以用 flexbox 做到这一点。您使文本始终居中,而图标flex-start
. 当文本较高时,中心将等于flex-start
。
这是一个简化的示例:
.box {
max-width: 320px;
display: flex;
align-items: flex-start;
border: 1px solid;
}
.icon {
width: 80px;
height: 80px;
background: teal;
margin-right:10px;
border-radius: 50%;
flex-shrink: 0;
}
.text {
align-self: center;
border: 1px solid;
}
h3,p {
margin: 5px 0;
}
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel orci orci. Suspendisse ultrices velit sit amet venenatis venenatis. Pellentesque non leo nec ipsum pulvinar aliquet ut ac lorem</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
<p>orem ipsum dolor sit amet, </p>
</div>
</div>
推荐阅读
- vb.net - 如何让这些循环停止组合结果?
- java - 从 5 张牌手扑克中获得对子的概率
- python - 如果元素包含,则将 2 个元素合并在一起
- linux - 是否可以替换现有 char 设备的 char 驱动程序?
- amazon-web-services - Cloudwatch 中特定域的 AWS SES 配置
- html - 如何缓解 Angular 中的加载屏幕?
- .net - 是否可以在.net core 的不同项目中添加服务?
- bash - 通过 bash 脚本运行 python 脚本会导致意外输出
- html - JSP 页面是否与 HTML5 语法兼容?
- javascript - 函数名调用后何时使用括号(es6)