Question

我被告知要编写一个正常工作的代码，这就是为什么我在这里有如此多的代码，但我想要关注的部分是在中心对齐顶部的“resumania”徽标。当我把align：center;或文本对齐：中心;它不会对齐。我正在使用的课程是“徽标”。我做错了什么？

<!DOCTYPE html>
<html>
<body>

<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!--NEED HELP RIGHT HERE-->

<a href=/Users/mtaslagyan/Desktop/resumania/homepage.html><img class="logo" src="/Users/mtaslagyan/Desktop/resumania/images/resumanialogo.PNG" alt="resumania logo pic"></a>

</head>

<div class="box">
    <div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
        <img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
        </div>
        <div class="col-md-8">
        <h1 class="heading" align="center">Welcome to Resumania!</h1>
        </div>
    </div>
    </div>
</div>


<a href=/Users/mtaslagyan/Desktop/resumania/majorlinks/testpage.html>check this out</a>

</body>

<style>
a {
    color: #2d2d2d;
}

.logo{
    width:200px;
    border-radius:10px;
    text-align: center;


}

.box{
    width:100%;
    background-color:#f6f6f6;
}

.heading{
    color:navy;
    padding: 80px 100px 0px 0px;
    font-family: 'Ultra', serif;
}


</style>

</html>

Answer 1

试试这个。如果您为a标签提供了类徽标，我的意思是您的徽标图片的父级将更好，否则标签将是全宽。

.logo {
    width: 200px;
    border-radius: 10px;
    margin: 0 auto;
    display: block;
}

Answer 2

您可以将css属性display:flex; align-items:center提供给您的父类（即）类＃34;框＆＃34;

Answer 3

一种方法是使用块元素包装<a>，如<div>，然后您可以使用text-align:center

a {
  color: #2d2d2d;
}

.wrapper {
  text-align: center;
}

.logo {
  width: 200px;
  border-radius: 10px;
}

.box {
  width: 100%;
  background-color: #f6f6f6;
}

.heading {
  color: navy;
  padding: 80px 100px 0px 0px;
  font-family: 'Ultra', serif;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="wrapper">
  <a href=/Users/mtaslagyan/Desktop/resumania/homepage.html><img class="logo" src="http://via.placeholder.com/200x100" alt="resumania logo pic"></a>
</div>

<div class="box">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
      </div>
      <div class="col-md-8">
        <h1 class="heading" align="center">Welcome to Resumania!</h1>
      </div>
    </div>
  </div>
</div>

Answer 4

您可以参考此jsfiddle。

enter code here

不确定text-align，align，inline和block之间的区别，哪一个适用于我的情况？

4 个答案: