Question

我正在尝试制作一个菜单按钮，该按钮是底部带有文本的图像，如下所示： jsfiddle

在jsfiddle上，它可以正常工作，但是当我加载页面“ title”元素而不是位于其底部时，它位于其顶部（位于其父边框之外）：bad

在我的代码中，我使用a-tags而不是div，因为在jsfiddle上，使用a-tag看起来不正确，但是我不认为这是个问题，因为我在代码中尝试了divs，并且“ bug”仍然存在并且外观不变：

<a class="menu-item" href="#">
    <p>Title</p>
</a>

在检查模式下切换标题属性之一（文本对齐，宽度，底部或页边距）后，现在应按如下所示打开它：good什么？为什么？

在尝试解决此问题时，我发现当我从.menu-item删除“ margin：auto”时不再发生，但这显然不是解决方案，因为现在我的按钮没有居中。

.menu-item {
  margin: auto;
}

我是CSS的新手，所以我想到的唯一解决方案是使用JS切换属性之一，但这似乎有点不客气，而且我相信还有更好的方法。我尝试更改.css文件中样式的顺序，但没有执行任何操作。

所以我的问题是：为什么会发生这种情况（不更改css样式的任何内容，只切换一次又一次，更改外观），我该怎么做才能解决此问题？

编辑：

我的本地文件：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css">
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="center">
            <div class="menu">
                <div id="left-mi" class="menu-item" href="#">
                    <p class="mi-title">Title</p>
                </div>
                <a id="middle-mi" class="menu-item" href="#"></a>
                <a id="right-mi" class="menu-item" href="#"></a>
            </div>
        </div>
        <div class="right"></div>
    </div>
    <div class="middle">
        <div class="left"></div>
        <div class="center">
        </div>
        <div class="right"></div>
    </div>
    <div class="bottom">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

styles.css

body {
    width: 100%;
    margin: 0;
    background: steelblue;
}

.left, .center, .right {
    height: 100%;
    display: table-cell;
}

.left, .right {
    width: auto;
}

.center {
    width: 50%;
    margin: auto;
}

.top, .middle, .bottom {
    display: table;
    width: 100%;
}

.mi-title {
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;

    position: absolute;
    bottom: 0;
    margin: 0;
}

.menu-item {
    height: 80%;
    display: block;
    margin: auto;
    width: 30%;
    position: relative;
}

.menu {
    margin: auto;
    width: 80%;
    height: 100%;
    background: magenta;

    display: flex;
}

/*#region Heights*/
.top {
height: 200px;
}
.middle {
height: 300px;
}
.bottom {
height: 100px;
}
/*#endregion*/
/*#region Borders*/
.top .center, .bottom .center, .middle > div {
border: 1px solid black;
}
.top .center, .bottom .center {
border-top: 0;
border-bottom: 0;
}
.middle .left, .middle .right {
border-left: 0;
border-right: 0;
}
/*#endregion*/
/*#region Debug Colors*/
#left-mi {
background: red;
}
#middle-mi {
background: green;
}
#right-mi {
background: blue;
}

.top .left {
background: rgb(80, 0, 0);
}
.top .center {
background: rgb(160, 0, 0);
}
.top .right {
background: rgb(250, 0, 0);
}

.middle .left {
background: rgb(0, 80, 0);
}
.middle .center {
background: rgb(0, 160, 0);
}
.middle .right {
background: rgb(0, 250, 0);
}

.bottom .left {
background: rgb(0, 0, 80);
}
.bottom .center {
background: rgb(0, 0, 160);
}
.bottom .right {
background: rgb(0, 0, 250);
}
/*#endregion*/

Answer 1

您可以执行以下操作。继续调整左侧，直到将按钮居中。可能有更好的解决方案，但我认为这很好。

<a class="menu-item" href="#">
    <p>Title</p>
</a>

对应的CSS可以是

.menu-item {
  width: 100px;
  height: 100px;
  background: red;
  margin: none;
  left:43%;
  position: relative;
}

我希望这对您有帮助

切换CSS属性来改变外观

1 个答案: