Question

我无法将个人资料图片置于中心位置。有关如何做到这一点的任何想法？我尝试使用浮动来获取内联后退按钮，但它会将配置文件图片向右移动一点。如何让它对齐？

这是我的HTML代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>About Me</title>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap.css"/>

    <link rel="stylesheet" type="text/css" href="blackbg.css"/>
</head>
<body>
    <a href="#" class="myButton">Back</a>
    <header>
        <img id="profilepic" src="http://i.imgur.com/rEVubAf.jpg">
        <h1>Zheng Yuxiang</h1>
    </header>
    <article>
        <p>I am a fuccboi that loves bad bitches. Oh and I love Yeezy too and his overpriced sneakers.</p>
        <img src="http://sneakerbardetroit.com/wp-content/uploads/2015/11/adidas-yeezy-350-boost-moonrock-release.jpg" alt="Yeezy 350" width=600px id="yeezy">
    </article>  

</body>

这是我的CSS代码。

body {
  background-color: black;
}
header {
  text-align: center;
  color:white;
}
#profilepic {
  margin: 40px 0px 0px px;
  border: 4.5px solid white;
  border-radius: 100px;
}
h1 {
  font-family:avenir ,sans-serif;
  font-variant: light;
  font-size:50px;
}
nav {
  font-size: 15px;
}
a {
  margin:5px;
  color:white;
}
@media (max-width: 750px) {
h1 {
    font-size: 25px
}
nav {
    font-size: 10px;
}
}
article {
  text-align: center;
}
#yeezy {
  padding:20px;
}
p {
  color:#b7b1b5;
}
.myButton {
  margin-top: 40px;
  margin-left: 40px;
  background-color:#ededed;
  -moz-border-radius:42px;
  -webkit-border-radius:42px;
  border-radius:42px;
  display:inline-block;
  cursor:pointer;
  color:#777777;
  font-family:avenir;
  font-size:17px;
  padding:14px 22px;
  text-decoration:none;
  float:left;
}
.myButton:hover {
  background-color:#dfdfdf;
}
.myButton:active {
  position:relative;
  top:1px;
}

Answer 1

试试这个

＆＃13;

body {
  background-color: black;
}
header {
  text-align: center;
  color:white;
  position: relative;
}
#profilepic {
  margin: 40px 0px 0px px;
  border: 4.5px solid white;
  border-radius: 100px;
}
h1 {
  font-family:avenir ,sans-serif;
  font-variant: light;
  font-size:50px;
}
nav {
  font-size: 15px;
}
a {
  margin:5px;
  color:white;
}
@media (max-width: 750px) {
h1 {
    font-size: 25px
}
nav {
    font-size: 10px;
}
}
article {
  text-align: center;
}
#yeezy {
  padding:20px;
}
p {
  color:#b7b1b5;
}
.myButton {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: 40px;
  margin-left: 40px;
  background-color:#ededed;
  -moz-border-radius:42px;
  -webkit-border-radius:42px;
  border-radius:42px;
  display:inline-block;
  cursor:pointer;
  color:#777777;
  font-family:avenir;
  font-size:17px;
  padding:14px 22px;
  text-decoration:none;
  float:left;
}
.myButton:hover {
  background-color:#dfdfdf;
}
.myButton:active {
  position:relative;
  top:1px;
}

＆＃13;

<html lang="en">
  <head>
    <title>About Me</title>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap.css"/>

    <link rel="stylesheet" type="text/css" href="blackbg.css"/>
</head>
<body>
    
    <header>
        <img id="profilepic" src="http://i.imgur.com/rEVubAf.jpg">
        <h1>Zheng Yuxiang</h1>
      
    <a href="#" class="myButton">Back</a>
    </header>
    <article>
        <p>I am a fuccboi that loves bad bitches. Oh and I love Yeezy too and his overpriced sneakers.</p>
        <img src="http://sneakerbardetroit.com/wp-content/uploads/2015/11/adidas-yeezy-350-boost-moonrock-release.jpg" alt="Yeezy 350" width=600px id="yeezy">
    </article>  

</body>

＆＃13;

Answer 2

这是因为您在顶部的float:left中使用了<a>

在标题

中使用follwing css

header {
  text-align: center;
  color:white;
  clear:left;
}

这是添加css行的最简单方法

工作示例：https://jsfiddle.net/voz0vnvL/

Answer 3

问题是该按钮占据了图像所在行的一些空间，因此图像容器不能具有全宽。在标题元素之后移动按钮元素并绝对定位。

此解决方案允许按钮与图像保持在同一行，但允许图像居中。

body { background-color: black; } header { text-align: center; color:white; } #profilepic { margin: 40px 0px 0px px; border: 4.5px solid white; border-radius: 100px; } h1 { font-family:avenir ,sans-serif; font-variant: light; font-size:50px; } nav { font-size: 15px; } a { margin:5px; color:white; } @media (max-width: 750px) { h1 { font-size: 25px } nav { font-size: 10px; } } article { text-align: center; } #yeezy { padding:20px; } p { color:#b7b1b5; } .myButton { margin-top: 40px; margin-left: 40px; background-color:#ededed; -moz-border-radius:42px; -webkit-border-radius:42px; border-radius:42px; display:inline-block; cursor:pointer; color:#777777; font-family:avenir; font-size:17px; padding:14px 22px; text-decoration:none; position:absolute; left:0px; top:0px; } .myButton:hover { background-color:#dfdfdf; } .myButton:active { position:relative; top:1px; }

<!DOCTYPE html> <html lang="en"> <head> <title>About Me</title> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.css"/> <link rel="stylesheet" type="text/css" href="blackbg.css"/> </head> <body> <header> <img id="profilepic" src="http://i.imgur.com/rEVubAf.jpg"> <h1>Zheng Yuxiang</h1> </header> <a href="#" class="myButton">Back</a> <article> <p>I am a fuccboi that loves bad bitches. Oh and I love Yeezy too and his overpriced sneakers.</p> <img src="http://sneakerbardetroit.com/wp-content/uploads/2015/11/adidas-yeezy-350-boost-moonrock-release.jpg" alt="Yeezy 350" width=600px id="yeezy"> </article> </body>

Answer 4

只需替换它：

        .myButton {
        margin-top: 40px;
        margin-left: 40px;
        background-color: #ededed;
        -moz-border-radius: 42px;
        -webkit-border-radius: 42px;
        border-radius: 42px;
        display: inline-block;
        cursor: pointer;
        color: #777777;
        font-family: avenir;
        font-size: 17px;
        padding: 14px 22px;
        text-decoration: none;
        float: left;
    }

由此：

        .myButton {
        margin-top: 40px;
        margin-left: 40px;
        background-color: #ededed;
        -moz-border-radius: 42px;
        -webkit-border-radius: 42px;
        border-radius: 42px;
        display: inline-block;
        cursor: pointer;
        color: #777777;
        font-family: avenir;
        font-size: 17px;
        padding: 14px 22px;
        text-decoration: none;
        float: absolute;
    }

如何获取配置文件图片对齐中心？

4 个答案: