Html CSS:使用文本对齐:跨度居中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16520718/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:20:58  来源:igfitidea点击:

CSS: using text-align: center in span

csshtmltext-align

提问by user1904273

For a calendar app, I want to have the familiar look of the month name centered with a left arrow at the left margin to go back a month and the right arrow at the right margin to go forward a month. Something like < May >

对于日历应用程序,我希望以熟悉的月份名称外观为中心,左边距的左箭头可以返回一个月,右边距的右箭头可以向前一个月。就像是< May >

<Div>s insert line breaks at the end so I thought I would use span except span is an inline element so that the text-align: centerproperty only aligns it within the length of the month. Just using text-align: centerproduces something like <May >

<Div>s 在末尾插入换行符,所以我想我会使用 span,除了 span 是一个内联元素,以便该text-align: center属性仅在月份的长度内对齐它。只是使用text-align: center产生类似的东西<May >

To compensate for this, I have added display: blockin the span, however, this creates a line break at the end ie

为了弥补这一点,我添加display: block了跨度,但是,这会在末尾创建一个换行符,即

<     May
              >

Can anyone suggest a proper way to do this?

谁能建议一个正确的方法来做到这一点?

Last version:

最新版本:

CSS/HTML:

CSS/HTML:

span.previous {
     float:left;
}
span.next {
     float:right;    
}
span.month {
     display:block;
     text-align:center;
}
<span class="previous"><img src="leftarrow.gif"></span>
<span class = "month">May</span>
<span class="next"><img src="rightarrow.gif"></span>

回答by nice ass

You need to apply the text-align to the container element, and remove display:block(text-align works with inline/inline-block elements). And don't forget to clear the floats after the container.

您需要将 text-align 应用于容器元素,并删除display:block(text-align 与 inline/inline-block 元素一起使用)。并且不要忘记清除容器后的浮标。

fiddle

小提琴

回答by Fico

One way to design your calendar header could be the following. In my example (this fiddle), I used an asterisk instead of an image. I replaced the month span for a paragraph and changed the order of your markup.

设计日历标题的一种方法可能如下。在我的示例(这个小提琴)中,我使用了星号而不是图像。我替换了段落的月份跨度并更改了标记的顺序。

Asterisks or images will be kept at the sides and the month in the middle in a flexible design. See this fiddle.

星号或图像将保留在两侧,月份以灵活的设计保留在中间。看到这个小提琴

#header {
    background:#e0e0e0;
}
span.previous {
    float:left;
}
span.next {
    float:right;    
}
p.month {
    text-align:center;
}
<div id="header">
    <span class="previous">**</span>
    <span class="next">**</span>
    <p class = "month">May</p>
</div>