2017-11-02 21 views
0

を揃える:The footer text is weirdly aligned (text-align is on center here, text-align left puts it slightly left of the center and text-align right works properly.テキスト文句を言わない。これは、今起こっている適切

I also tried display: table-cell which aligns my text properly but puts the footer itself in an awkward spot and it cant be moved using margins.

は、ここに私の(関連)コードです:

.footer { 
 
    display: table-cell; 
 
    background-color: aqua; 
 
    width: 1000px; 
 
    max-width: 1000px; 
 
    margin: auto; 
 
    border: 5px solid #ccc; 
 
    margin-top: 30px; 
 
    line-height: 12px; 
 
    text-align: center; 
 
}
<footer> 
 
    <div class="footer"> 
 
    <h2>Footer stuff</h2> 
 
    </div> 
 
</footer>

うまくいけば、これが全てですあなたは私の投稿をできるだけ短くしておくことを好む必要があります、もっと必要なものがあるかどうか、事前に感謝してください助けを求めて

EDIT:flexboxesと私の全体のコード

Body { 
 
    background-color: darkred;  
 
} 
 
.header { 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
#navbar { 
 
    width: 100%; 
 
    float: left; 
 
    margin: 0 0 3em 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    background-color: darkblue; 
 
    border-bottom: 1px solid #ccc; 
 
    border-top: 1px solid #ccc; 
 
} 
 
#navbar li { 
 
    float: left; 
 
} 
 
#navbar li a { 
 
    display: block; 
 
    padding: 8px 160px; 
 
    font-weight: bold; 
 
    color: white; 
 
    border-right: 1px solid #ccc; 
 
} 
 
#navbar li a:hover { 
 
    color: #c00; 
 
    background-color: #fff; 
 
} 
 
.container { 
 
    background-color: aqua; 
 
    width: 100%; 
 
    max-width: 1000px; 
 
    margin-top: 50px; 
 
    margin-bottom: auto; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    border: 5px solid #ccc; 
 
    text-align: center; 
 
    height: 100%; /* BE ADVISED! (????) */ 
 
} 
 
#ipsumpic1 { 
 
    width: 150px; 
 
    float: right; 
 
} 
 
#ipsumpic2 { 
 
    width: 100px; 
 
    float: left; 
 
} 
 
#sidebarleft { 
 
    margin: 0px auto; 
 
    position: relative; 
 
    left: 1000px; 
 
    padding-top: 0px; 
 
    width: 240px; 
 
    float: left; 
 
    border: 5px solid #ccc; 
 
    background-color: aqua; 
 
    margin-top: -350px; 
 
} 
 
#sidebarright { 
 
    padding-top: 0px; 
 
    width: 240px; 
 
    float: right; 
 
    border: 5px solid #ccc; 
 
    background-color: aqua; 
 
    margin-top: -537px; 
 
    margin-right: 1100px; 
 
} 
 
.footer { 
 
    display: table; 
 
    background-color: aqua; 
 
    width: 1000px; 
 
    max-width: 1000px; 
 
    margin: auto; 
 
    border: 5px solid #ccc; 
 
    margin-top: 30px; 
 
    line-height: 12px; 
 
    text-align: center; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Prachtige website</title> 
 
\t \t <meta charset="utf-8"> 
 
     <link rel="Stylesheet"type="text/css" href="css/style.css"> 
 
     <script type=text/javascript src="script.js"></script> 
 
\t </head> 
 
\t <body> 
 
     <header> 
 
      <div class="header"> 
 
       <a href="index.html"><img src="img/logo.svg" width="200"></a> 
 
      </div> 
 
     </header> 
 
      <ul id="navbar"> 
 
       <li><a href="index.html">Home</a></li> 
 
       <li><a href="producten.html">Producten</a></li> 
 
       <li><a href="diensten.html">Diensten</a></li> 
 
       <li><a href="over.html">Over Ons</a></li> 
 
       <li><a href="contact.html">Contact</a></li> 
 
      </ul> 
 
     <div class="container"> 
 
      <main> 
 
       <h1>Lorem Ipsum</h1> 
 
       <img id="ipsumpic1" src="img/ipsum1.svg"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a pulvinar dolor, a rutrum tortor. Vestibulum auctor finibus odio id efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ullamcorper risus neque, sed vehicula augue finibus sed. Donec pretium ornare libero a venenatis. Donec sed ex id tellus posuere interdum. Nullam tincidunt egestas odio non gravida. Sed ut felis aliquet eros commodo elementum. Aliquam ullamcorper, diam quis aliquet tempor, magna nisi laoreet nisl, at vestibulum arcu enim quis elit. </p> 
 
       <img id="ipsumpic2" src="img/ipsum2.svg"> 
 
       <p>Ut faucibus dui lectus, vitae pharetra magna maximus quis. Donec sollicitudin sem non ornare vulputate. Suspendisse pretium lacus nec gravida tristique. Sed sed nibh et eros facilisis accumsan. Nam mi elit, fermentum eu laoreet vel, venenatis sit amet leo. Curabitur erat arcu, dictum eu massa quis, hendrerit mattis turpis. Etiam ultrices quam dolor, a interdum erat eleifend eu. Cras sed blandit nunc. In dictum dignissim enim, vel gravida nisl sagittis pellentesque. Quisque fermentum pellentesque velit a faucibus. Nulla facilisi. In fermentum, mi id feugiat ultricies, nulla lorem elementum felis, et pretium velit mauris sit amet odio. Curabitur facilisis, mi in eleifend commodo, enim ex dignissim quam, ut pulvinar magna nisl et orci. Duis pulvinar imperdiet pretium. Nullam vehicula tortor in ex volutpat egestas. </p> 
 
      </main> 
 
      <div id="sidebarleft"> 
 
       <aside> 
 
        <h2>Nieuw nieuws!</h2> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Fusce sit amet turpis id lacus consectetur sollicitudin. </p> 
 
       </aside> 
 
      </div> 
 
      <div id="sidebarright"> 
 
       <aside> 
 
        <h2>Social media!</h2> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit leo, finibus sed risus eget, semper molestie lacus. Integer dictum laoreet erat a facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum luctus diam a est accumsan, eget maximus sem bibendum. Pellentesque efficitur tellus maximus elit egestas bibendum. Cras efficitur enim tortor, a fringilla lacus tristique quis. Pellentesque neque felis, faucibus nec nibh vel, dapibus congue lorem. Sed scelerisque ligula vitae convallis condimentum. Nulla a ante pulvinar, tristique turpis a, sagittis ipsum. Aliquam fringilla convallis justo, eu eleifend quam placerat ac. Fusce sit amet turpis id lacus consectetur sollicitudin.</p> 
 
       </aside> 
 
      </div> 
 
     </div> 
 
     <footer> 
 
      <div class="footer"> 
 
       <h2>Footer stuff</h2> 
 
      </div> 
 
     </footer> 
 
\t </body> 
 
</html>

+0

たぶん1000pxの幅が表示領域内に完全に適合しないので、1000年の中心ではない子供たちに、親(.footer)とテーブルセルにテーブルを適用します多分、700の目に見えるpxの中心? –

答えて

0

ソリューション:

display: flex; 
flex-flow: row; 
justify-content: center; --> centering horizontally 
align-items: center; --> centering vertically 

あなたは、テーブルセルの試みを使用する場合:

vertical-align: center; 
+0

フレックスボックスを使用したソリューションはdisplay:tableと同じです。 (posteditを参照)、テーブルセルとの垂直方向の配置は、垂直方向の配置なしでテーブルセルから何も変更しません。 –

1

.footer h2

.footer { 
 
    display: table; 
 
    background-color: aqua; 
 
    width: 100%; 
 
    border: 5px solid #ccc; 
 
    height: 100px; 
 
} 
 

 
.footer h2 { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}
<footer> 
 
    <div class="footer"> 
 
    <h2>Footer stuff</h2> 
 
    </div> 
 
</footer>

+0

あなたのコードは私にこれを与えてくれます:https://i.imgur.com/ix4lz1k.png私のコードで余白を追加すると、自分の投稿の編集で私が話したことが分かります。 –

+0

あなたが他のいくつかの親のdiv内

保ち、それは全体の幅とをカバーしていない理由のthatsているようだ、あなたが質問 –

+0

あなたの条件に応じて使用することができますマージンについて残りのコードを自分の投稿自体に表示する –

関連する問題