html - 将三个 div 居中并排放置

Question

刚开始不太擅长这个，但我无法将这些 div 居中，有人可以帮忙吗:/我在网上看过，但没有找到任何适合它的东西……我只有 12 岁，一切都很好对我来说是新的。

*{
    margin: 0px;
    padding: 0px;
}
#Title{
    height:75px;
    width:60%;
    margin-top:5%;
    background-color:black;
    display: table;
    margin-left: auto ;
    margin-right: auto ;
}
#Wallpaper{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}
#Logo{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}
#YoutubeBanner{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}

Answer 1

这是一种做到这一点的方法，它响应迅速且流畅。

演示:https://jsbin.com/puhixo/1/

CSS

body,
html {
    margin: 0;
    padding: 0;
    background: #fff;
    font: 1em/1.5 sans-serif;
}
.row,
.column {
    box-sizing: border-box /*so padding and borders are included in width */
}
.row {
    word-spacing: -1em; /* fix the inline block extra space issue */
    letter-spacing: -1em; /* fix the inline block extra space issue */
    overflow: hidden;
    text-align: center;
    padding: 0 20px;
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
}
.column {
    vertical-align: top;
    word-spacing: normal; /* reset child */
    letter-spacing: normal; /* reset child */
    display: inline-block;
    border: 1px solid red;
    width: 100%; /* the size UNDER the min-width in the media query*/
    padding: 10px;
    text-align: left; /* reset child */
}
@media (min-width:500px) { 
    .column {
        width: 33.333%;
        max-width: 250px; /* the max-width */
    }
}

HTML:

<div class="row">
   <div class="column">
      Column 1 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
   <div class="column">
      Column 2 text goes here. Text goes here for column 1.  
   </div>
   <!--/.column -->
   <div class="column">
      Column 3 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
</div>
<!--/.row -->