Question

如何将“平均设计”置于徽标顶部和徽标下方的描述中？整个事物应该垂直和水平居中

现在看起来像这样

现在是代码

.title {
    text-align: center;
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
}

<div class="cover-wrapper">
            <div class="title">
            <h1 id="mean">Mean Design.</h1>
            <img class="img-responsive" id="logo" src="MeanDesignLogo.png">
            <h6 id="des">ui/ux • web design • graphic design • illustration</h6>
                </div>
</div> <!-- cover wrapper -->

Answer 1

你想要得到这样的东西吗？

    <!DOCTYPE html>
<html>
<head>
<style>
.title {
    text-align: center;
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image:url(MeanDesignLogo.png); 
    background-repeat:no-repeat;
    background-size:100% 100%
}

.title2 {
    text-align: center;
    position: absolute;
    color: black;
    top: 449px;
    left: 592px;
    transform: translate(-50%, -50%);
}

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
}
</style>
</head>
<body>
<div class="cover-wrapper">
  <div class="title">
            <h1 id="mean">Mean Design.</h1>
 <h6 id="des"></h6>
  </div>
  <div class="title2">
    <h6 id="des">ui/ux • web design • graphic design • illustration</h6>
  </div>
</div> <!-- cover wrapper -->
</body>
</html>

Answer 2

您只需删除#logo中的所有css：

＆＃13;

.title {
    text-align: center;
    position: absolute;
    color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

＆＃13;

<div class="cover-wrapper">
            <div class="title">
            <h1 id="mean">Mean Design.</h1>
            <img class="img-responsive" id="logo" src="http://placehold.it/200x50?text=LOGO">
            <h6 id="des">ui/ux • web design • graphic design • illustration</h6>
                </div>
</div> <!-- cover wrapper -->

＆＃13;

定位标题和img

2 个答案: