对齐仅在移动设备上居中的文本 [英] Align text centered only on mobile
本文介绍了对齐仅在移动设备上居中的文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望文本仅在移动设备上居中对齐。在桌面上,文本应右对齐。
I want the text to align centered on mobile only. On desktop the text should align right.
@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
.centerMobileOnly {
text-align: center !important;
}
}
@media only screen and (min-device-width: 600px) {
.rightDesktopOnly {
text-align: right !important;
}
}
<div>
<h3 class="rightDesktopOnly centerMobileOnly">02:00</h3>
</div>
推荐答案
您不必为媒体css添加两个类,而只能通过单个类。
you dont have to add two class for media css you can go through single only.
.centerMobileOnly{
text-align: right;
}
@media (max-device-width: 800px) {
.centerMobileOnly {
text-align: center;
}
}
<div>
<h3 class="centerMobileOnly">02:00</h3>
</div>
这篇关于对齐仅在移动设备上居中的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文