Question

我正在为我的网站制作页脚，并想知道是否可以将文本置于页面中心，并在页面右侧与文本位于同一行中的几张图片。

每当我使用text-align:center将文字居中时，图片就会被推到下面一行。

HTML：

<div class="footer">
    <hr id="break">
    <p id="credit">Created by:</p>
    <a class="picture" id="linkedin" href="#" target="_blank">
        <img src="Pictures/linkedin.png" width="20px" height="20px"/>
    </a>
    <a class="picture" id="email" href="#" target="_top">
        <img src="Pictures/email.png" width="20px" height="20px"/>
    </a>
    <a class="picture" id="github" href="#" target="_blank">
        <img src="Pictures/github.png" width="40px" height="10.45px"/>
    </a>
</div>

CSS：

#break {
    margin:0;
}

.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:40px;
    background-color:rgba(191,191,191,.65);
}

#credit {
    float:left;
    margin:0;
    padding-top:10px;
    padding-left:44%;
    color:rgba(0,0,0,.5);
}

.picture {
    padding-top:10px;
    float:right;
    margin:0;
}

#linkedin {
    padding-right:50px;
}

#email {
    padding-right:15px;
}

#github {
    padding-right:15px;
}

Answer 1

这个怎么样？

.footer { display: flex; flex-direction: row; justify-content: center;}

这会将所有图像和文本对齐在页脚的中心。

如果您想在图像和文本之间留出空间，请尝试以下操作：

.footer { display: flex; flex-direction: row; justify-content: space-around;}

.footer > *{margin: auto; }

希望它有所帮助。

Answer 2

body {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 40px;
  background-color: rgba(191, 191, 191, .65);
  border-top: 1px solid black;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  justify-content: center;
}

#credit {
  color: rgba(0, 0, 0, .5);
}

.footer a {
  margin-left: 8px;
}

<div class="footer">
  <p id="credit">Created by:</p>
  <a class="picture" id="linkedin" href="#" target="_blank">
    <img src="http://beerhold.it/20/20">
  </a>
  <a class="picture" id="email" href="#" target="_top">
    <img src="http://beerhold.it/20/20">
  </a>
  <a class="picture" id="github" href="#" target="_blank">
    <img src="http://beerhold.it/40/10">
  </a>
</div>

body {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 40px;
  background-color: rgba(191, 191, 191, .65);
  border-top: 1px solid black;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
}

#credit {
  color: rgba(0, 0, 0, .5);
  flex: 100;
}

.footer a {
  margin-left: 8px;
}

<div class="footer">
  <p id="credit">Created by:</p>
  <a class="picture" id="linkedin" href="#" target="_blank">
    <img src="http://beerhold.it/20/20">
  </a>
  <a class="picture" id="email" href="#" target="_top">
    <img src="http://beerhold.it/20/20">
  </a>
  <a class="picture" id="github" href="#" target="_blank">
    <img src="http://beerhold.it/40/10">
  </a>
</div>

居中的文字和图片在同一行

2 个答案: