Question

我对滑动门技术here有疑问。由于滑动门技术，描述后的标题左侧浮动，但我想要的只是在中心，产品上方独立。

你能帮我理解怎么做吗？

以下是我用于标题的CSS：

h3.offer-title, h3#comments, h3#reply-title  {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }

h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}

谢谢。

Answer 1

它是浮动的，因为您在第一个CSS代码块中设置了float: left。要摆脱这种行为，你需要摆脱浮动。

一旦浮动消失了，如果你希望标题的背景与以前一样非常适合文本，那么元素需要display: inline-block。

但是display: inline-block并且标题上没有设置宽度（您可以添加宽度，但如果您想要更改文本或字体大小，则可能会中断），它不会居中。为了使它居中，你需要一个包围元素，它有text-align: center。

所以：

添加此块：

h3.offer-title {
    display: inline-block; /* this makes the bg fit the text */
    float: none; /* this overrides float:left */
}

将offer-title元素换行到另一个div中。

使用

设置包装器的样式

 .offer-title-wrapper {
    text-align: center;
}

使用CSS滑动门对中

1 个答案: