如何水平对齐元素？答案

【问题标题】：How can I horizontally align elements?如何水平对齐元素？
【发布时间】：2017-04-23 13:35:43
【问题描述】：

大家！！我正在 codepen 中构建一个非常简单的页面，我对这些东西很陌生。我想将导航栏上的所有选项对齐在同一行。我什至不知道他们为什么一开始就这样。我也想对页面末尾的社交媒体图标做同样的事情。这是我的笔https://codepen.io/maria_punchio/pen/mWggYO/。

.topnav {
background-color: #586882;
overflow: hidden;}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: px 16px;
text-decoration: none;
font-size: 17px;}

<div class="container-fluid">
        <div class="topnav">
    <a href="#div_id">ABOUT</a>
    <a href="#div_id2">PORTFOLIO</a>
    <a href="#div_id3">CONTACT ME</a>
        </div>

谢谢

【问题讨论】：

标签： html css alignment

【解决方案1】：

这就是你要找的吗？

.topnav {
background-color: #586882;
overflow: hidden;}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 17px;}

<div class="container-fluid">
        <div class="topnav">
    <a href="#div_id">ABOUT</a>
    <a href="#div_id2">PORTFOLIO</a>
    <a href="#div_id3">CONTACT ME</a>
        </div>
</div>

【讨论】：

【解决方案2】：

.topnav {
background-color: #586882;
overflow: hidden;}

.topnav a {
float: left;
display:block; margin-left: 5px;;
color: #f2f2f2;
text-align: center;
padding:16px;
text-decoration: none;
font-size: 17px;}

  <div class="container-fluid">
    <div class="topnav">
<a href="#div_id">ABOUT</a>
<a href="#div_id2">PORTFOLIO</a>
<a href="#div_id3">CONTACT ME</a>
    </div>

这里是代码...

   <style>.topnav {
  background-color: #586882;
  overflow: hidden;}

 .topnav a {
  float: left;
   display:block; margin-left: 5px;;
     color: #f2f2f2;
   text-align: center;
    padding:16px;
   text-decoration: none;
        font-size: 17px;}</style>

THIS IS OUTPUT PICTURE CLICK ON IT

【讨论】：

【解决方案3】：

快速解决方法是添加

width: 33%;
margin: 0;

到您的 CSS 中的 .topnav a。

但我建议你看看 flexbox 是如何工作的，因为它的响应速度会更快。

我个人非常喜欢this guide。

【讨论】：

【解决方案4】：

改变这个：

a {
  overflow: hidden;
  display: inline-block;
  margin-bottom: px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

到这里：

a {
  overflow: hidden;
  display: inline-block;
  margin-bottom: px;
  width: calc(33% - 4px);
  margin-right: 8px;
}

然后改变这个：

@media screen and (min-width: 80em) {
  a {
    width: calc(40% - 6px);
  }
  a:nth-of-type(2n) {
    margin-right: 8px;
  }
  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

到这里：

@media screen and (min-width: 80em) {
  a {
    width: calc(33% - 6px);
  }
  a:nth-of-type(2n) {
    margin-right: 8px;
  }
  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

【讨论】：

【解决方案5】：

HTML

  <body style="background-color:#d1ffe3">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Heebo" rel="stylesheet">
  <div class="container-fluid">
    <ul class="topnav">
      <li style="width:100%"><a href="#div_id">ABOUT</a></li>
      <li style="width:100%"><a href="#div_id2">PORTFOLIO</a></li>
      <li style="width:90%"><a href="#div_id3">CONTACT ME</a></li>
    </ul>
  <center>
    <div id="div_id">
      <h1>ABOUT</h1></center>
  </div>

<div class="row">
  <div class="col-md-6">
    <center>
      <h2>Hello, I am Maria Pantsiou</h2>

      <h1>Former musician, 3D graphics design hobbyist, physicist and potential web developer.<h1>
</center></div>

</div>
</div>

  <div id="div_id2"><center><h1>PORTFOLIO</h1></center>
  </div>
  <center>
    <div>
      <a href="http://i.imgsafe.org/56bfd0da30.png">
        <figure>
          <img src="http://i.imgsafe.org/56bfd0da30.png" alt="">
        </figure>
      </a>

      <a href="http://i.imgsafe.org/56be3db222.png">
        <figure>
          <img src="http://i.imgsafe.org/56be3db222.png" alt="">
        </figure>
      </a>

      <a href="http://i.imgsafe.org/5649eb799c.png">
        <figure>
          <img src="http://i.imgsafe.org/5649eb799c.png" alt="">
        </figure>
      </a>
      <a href="http://i.imgsafe.org/56ae6b85ac.png">
        <figure>
          <img src="http://i.imgsafe.org/56ae6b85ac.png" alt="">
        </figure>
      </a>

  </center>


  <section id="contact">
    <div id="div_id3">
      <center>
        <h1>CONTACT ME</h1></center>
    </div>
    <section id="contact">
      <center>
        <div class="container">

          <form name="htmlform" method="post" action="toyousender.php">

            <input type="text" name="first_name" placeholder="NAME" required>

            <input type="email" name="email" placeholder="MAIL" required>

            <textarea name="comments" placeholder="MESSAGE" required></textarea>

            <button name="send" type="submit" class="submit">SEND</button>

          </form>

        </div>
      </center>
    </section>


    </div>

CSS

 body {    background-image: url('http://i.imgsafe.org/7d2cbd7925.jpg');   background-repeat: no-repeat;   background-attachment: fixed;   background-size: cover;  } .topnav {
    background-color: #586882;
    overflow: hidden;   width:100%;   display:inline-flex;
     }


/* Style the links inside the navigation bar */ .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: px 16px;
    text-decoration: none;
    font-size: 17px; }

/* Change the color of links on hover */ .topnav a:hover {
    background-color: #ddd;
    color: black; }

/* Add a color to the active/current link */ .topnav a.active {
    background-color: #4CAF50;
    color: white; }

h1 {   font-size: 30px;   font-family: 'Josefin Sans', sans-serif;

}

h2 {   font-size: 25px;   font-family: 'Heebo', sans-serif; }

.photo-border {   border-radius: 50%; }

.smaller_image {   width: 170px; }

body {   width: 90%;   margin: 30px auto;   font-family: sans-serif; }

div {   font-size: 0; }

a {   overflow: hidden;   display: inline-block;   margin-bottom: px;  width: calc(50% - 4px);   margin-right: 8px; }

a:nth-of-type(2n) {   margin-right: 0; }

@media screen and (min-width: 80em) {   a {
    width: calc(40% - 6px);   }   a:nth-of-type(2n) {
    margin-right: 8px;   }   a:nth-of-type(4n) {
    margin-right: 0;   } }

a:hover img {   transform: scale(1.15); }

figure {   margin: 5; }

img {   border: none;   max-width: 100%;   height: ;   display: block; background: #ccc;   transition: transform .2s ease-in-out; }

#contact {   width: 100%;   height: 100%;   margin 0 auto;   background: ; }

.container {   width: 960px;   height: auto;   margin: 0 auto;   padding: 50px 0; }

#contact .container form input,
#contact .container form textarea {   width: 97.4%;   height: 30px;   padding: 5px 10px;   font-size: 12px;   color: #999;   letter-spacing: 1px;   background: #cbd9ef;   border: 2px solid #586882;   margin-bottom: 5px;   -webkit-transition: all .1s ease-in-out;  
-moz-transition: all .1s ease-in-out;   -ms-transition: all .1s ease-in-out;   -o-transition: all .1s ease-in-out;   transition: all .1s ease-in-out; }

#contact .container form input:focus,
#contact .container form textarea:focus {   border: 2px solid #3b4759;   color: #999; }

#contact .container form textarea {   height: 150px; }

#contact .container form .submit {   width: 97.5%;   padding: 5px 10px;   font-size: 12px;   letter-spacing: 1px;   background: #586882; height: 40px;   text-transform: uppercase;   letter-spacing: 1px;   color: #FFF;   border: 2px solid #3b4759;   -webkit-transition: all .1s ease-in-out;   -moz-transition: all .1s ease-in-out;  
-ms-transition: all .1s ease-in-out;   -o-transition: all .1s ease-in-out;   transition: all .1s ease-in-out; }

#contact .container form .submit:hover {   color: #FFF;   border: 2px solid #586882;   background: #343f4f;   cursor: pointer; }

#contact .container form .required {   color: #586882; }

.fb_photo {   border-radius: 70%; }

.smaller-image {   width: 30px; }

【讨论】：