CSS 离子 - 当离子图标较大时，离子项目文本不会垂直居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35623280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic - ion-item text is not vertically centered when ion-icon is bigger
提问by user3607282
I have a list of ion-items with an icon followed by text. When the icon size is smaller as seen on the image below, the text seems to vertically align itself to the center of the ion-item. But when the icon is bigger, the alignment is a bit off.
我有一个带有图标后跟文本的离子项目列表。当图标尺寸较小时，如下图所示，文本似乎垂直对齐到离子项目的中心。但是当图标更大时，对齐方式有点偏离。
This is all I've added:
这是我添加的全部内容：
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
Recent
</ion-item>
And the CSS:
和 CSS：
.icon {
font-size: 35px;
color: #ffC977;
}
How can I fix this. I tried using vertical-align, align-itemand align-self. None of them worked.
我怎样才能解决这个问题。我尝试使用vertical-align,align-item和align-self. 他们都没有工作。
回答by Luís P. A.
Try this. Add a <span>element to the text, vertical-alignonly works with elements inline side by side :
尝试这个。<span>向文本添加元素，vertical-align仅适用于并排内联元素：
CSS
CSS
.icon {
display: inline-block;
font-size: 35px;
color: #ffC977;
vertical-align: middle;
}
.text{
display: inline-block;
vertical-align: middle;
}
HTML
HTML
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
<span class="text">Recent</span>
</ion-item>
回答by Andrews Duarte
Actually Ionic does that to you. But you need to inform where the elements will be with item-start, item-end, etc.
实际上 Ionic 对你这样做了。但是，你需要告知其中的元素将与item-start，item-end等
Just set your code like this:
只需像这样设置您的代码：
<ion-item>
<ion-icon item-start name="ion-ios-clock-outline" class="icon"></ion-icon>
Recent
</ion-item>
回答by Diogo Rodrigues
Using padding-verticalcss utilities can bring the same result. A list of css utilities for Ionic can be seen here: https://ionicframework.com/docs/theming/css-utilities/
使用padding-verticalcss 实用程序可以带来相同的结果。可以在此处查看 Ionic 的 css 实用程序列表：https: //ionicframework.com/docs/theming/css-utilities/
<ion-item>
<ion-row>
<ion-col width-25>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
</ion-col>
<ion-col width-75 padding-vertical>
Recent
</ion-col>
</ion-row>
</ion-item>
回答by Fazil Abdulkhadar
Please update your following CSS Class. Also you can move your text to a label tag and give the vertical-align middle for the label tag as well.
请更新您的以下 CSS 类。您也可以将文本移动到标签标签，并为标签标签提供垂直对齐的中间位置。
CSS
CSS
.icon {
font-size: 35px;
color: #ffC977;
vertical-align: middle;
}
label{
vertical-align: middle;
}
HTML
HTML
<ion-item>
<ion-icon class="icon ion-ios-clock-outline"></ion-icon>
<label>Recent</label>
</ion-item>
