0

我做了以下CSS类：

.mine-button {
    大纲：0；
    背景颜色：RGB（153,153,153）；
    边距：0 4px 100px 0；
    填充：0 1em；
    颜色：RGB（255,255,0）；
    高度：2em；
    文字装饰：无！重要；
    光标：指针；
    位置：相对；
    文本对齐：居中；
    垂直对齐：中间；
    -moz-边界半径：15px；
    -webkit-border-radius：15px；
    浮动：对；
}

然后我将以下内容添加到 HTML 文件中：

<a class='mine-button'>了解详情</a>

但这就是我得到

截屏

的： 有 2 个问题：
1.“自述文件”未在“按钮”中间垂直对齐
2.“按钮”位于文本的黄色边框上方，尽管 margin-bottom in上面的类设置为 100px ！

4

7 回答 7

1

您正在使用height: 2em，我添加padding-top: 0.3em并降低高度height: 1.7em，它使文本居中。

这是小提琴。

添加margin-bottom: 10px以将其移动到黄线中。

于 2013-07-29T14:27:06.607 回答
1

尝试添加：

.mine-button {
  position: relative;  
  line-height: 2em;
}

将line-height指定为与​​您的高度相同的值将使内容垂直对齐。

位置问题可能来自.mine-button父级（高度、最大高度等）或来自前一个元素，我猜是<p>. 您能否提供一个完整的示例以获得更准确的答案。

谢谢你。

于 2013-07-29T14:07:35.183 回答
1

尝试

line-height:30px;

在CSS中

于 2013-07-29T14:12:26.407 回答
1

将您的 a 标签更改为

<a class='mine-button'><span>Read more</span></a>

并使用“flexbox”来克服您对边距的不当使用和垂直对齐问题。

.mine-button { 
    outline: 0;
    background-color:rgb(153,153,153);
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly 
                                 works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display:flex;
    align-items:center;
    justify-content :center;
    height:30px;
    width:100px;
    color:rgb(255,255,0);
    text-decoration: none !important; 
    cursor: pointer; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;  
}
于 2017-10-23T14:14:18.473 回答
0

尝试添加

display: block;

规则

于 2013-07-29T14:06:59.730 回答
0

尝试添加padding-top:5px;到您的 CSS。

于 2013-07-29T14:25:27.863 回答
0

这个看起来更好。看看这个：我认为高度和填充不稳定。这应该做。

.mine-button {
  background-color: rgb(153,153,153); /* Green */
  border: none;
  color:yellow;
  border-radius:15px;
  padding:1em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
   cursor: pointer; 
  font-size: 16px;
  float :right;
}

第二个问题，您可能希望查看positionCSS 中的标签并left and right手动设置。那就是我会做的。也许还有另一种现代的方式，但我只是走传统的。希望有帮助，加油！！！

于 2019-09-12T02:20:27.533 回答