使用媒体查询将边栏居中

时间：2021-05-28 21:28:27

标签： html css

我有一个侧边部分，我想使用媒体查询将其居中，这样一旦在移动设备上查看，它就会在页面底部水平对齐。就像这样：

GOAL

这是它目前正在做的事情：

CURRENT

我有一些图片和文字不想分享，所以我会针对这个问题更改它们...

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    background-color: white;
}

/*GLOBAL*/

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

header ul {
    padding: 0;
    margin: 0;
}

.page-title {
    font-size: 20px;
}

.page-title-center {
    font-size: 20px;
    text-align: center;
}

.subheading-center {
    font-size: 15px;
    text-align: center;
    margin-top: 50px;
}

.dark {
    padding: 15px;
    background: #1CAC4B;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
}

.dark-center {
    padding: 15px;
    text-align: center;
    background: #1CAC4B;
    color: white;
    margin: 10px;
}

#hyperlink {
    color: #FFEE00;
}

#hyperlinkg {
    color: #1CAC4B;
}

/*HEADER*/



header {
    background: #1CAC4B;
    color: #fff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #FFEE00 3px solid;
    display: flex;
}

header a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
}

header li {
    float: left;
    display: inline;
    padding: 0 10px 0 10px;
}

header #branding {
    float: left;
}

header #branding-img img {
    float: left;
    width: 60px;
    height: 60px;
    padding: 0 20px 20px 0;
}

header #branding h1 {
    margin: 0;
}

header nav {
    float: right;
    margin-top: 14px;
}


header .highlight, header .current a {
    color: #FFEE00 /*YELLOW*/;
}

header a:hover {
    color: #cccccc;
    font-weight: bold;
}

/*SHOWCASE*/

#showcase {
    background:url("../img/grass.jpg") no-repeat;
    background-size: cover;
    min-height: 450px;
    text-align: center;
    color: white;
}

#showcase h1 { /**/
    margin-top: 150px;
    font-size: 60px;
    margin-bottom: 10px;
}

#showcase p {
    font-size: 30px;
}

/* CONTACT INFO */

#contact {
    color: white;
    background: #1CAC4B;
    padding: 25px;
    border-bottom: #FFEE00 3px solid;
    border-top: #FFEE00 3px solid;
}

#contact h1 {
    float: left;
}

#contact p {
    font-size: 20px;
    margin-top: 22px;
    font-weight: bold;
    float: right;
}

/*BOXES*/

.boxes {
    background: white; /*Background behind 3 circular images are white */
    display: flex; /*Makes circles drop if page is squished */
    flex-wrap: wrap; /*Makes circles in a horizontal row */
    justify-content: center;
}

.boxes figure {
    margin: 3.5%; /*makes it line up better */
    text-align: center; /*Puts text in center*/
    font-size: 20px;
}

.boxes figure img {
    border-radius: 25px; /*Makes images circular */
    width: 310px; /*Sets image width*/
    height: 220px; /*Sets image height - heigh and width must be same to make it a circular */
    box-shadow: gray 0 0 15px; /*Adds gray shadow to bottom of images */
}

/*MAIN-COL*/

article#main-col {
    float: left;
    width: 70%;
}

/*ABOUT PAGE SIDEBAR*/

aside#about-sidebar {
    float: right;
    margin-top: 50px;
}

aside#about-sidebar img {
    width: 230px;
    height: 184px;
    /*257px*/
}


/*SERVICES*/

ul#services li {
    list-style: none;
    padding: 20px;
    border: green solid 1px;
    margin-bottom: 10px;
    background: #e6e6e6;
}

/*SERVICES PAGE SIDEBAR*/

aside#service-sidebar {
    float: right;
    margin-top: 50px;
}


/*GALLERY SLIDESHOW*/

* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
  padding: 10px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}

/*FOOTER*/

footer {
    padding: 20px;
    margin-top: 20px;
    color: white;
    background-color: #1CAC4B;
    text-align: center;
}



/*MEDIA QUERIES*/

@media(max-width: 768px){
    header #branding,
    header nav,
    header nav li,
    #boxes .box,
    article#main-col,
    aside#sidebar {
        float: none;
        align-content: center;
        text-align: center;
        width: 100%;
    } 

    header {
        padding-bottom: 20px;
    }

    #showcase h1 {
        margin-top: 40px;
    }
}
<body>
    <main>
        <header>
            <div class="container">
                <div id="branding-img">
                    <a href="index.html"><img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
                </div>
                    <div id="branding">
                        <h1><span class="highlight">NAME SHORT</span>NAME</h1>
                    </div>

                    <nav>
                        <ul>
                        <li><a href="index.html">Home</a></li>
                        <li class="current"><a href="about.html">About</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <section id="main">
            <div class="container">
                <article id="main-col">
                    <h1 class="page-title">About The Company</h1>
                    <p class="dark">
                        Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
                    </p>
                    <h1 class="page-title">About Me</h1>
                    <p class="dark">
                        Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
                        <br>
                        <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet sapien quis felis imperdiet scelerisque. Maecenas vulputate, nisl quis laoreet efficitur, urna nunc viverra massa, placerat commodo ligula tellus vel lacus. Ut molestie, purus id gravida sollicitudin, ipsum ipsum scelerisque diam, quis hendrerit mauris massa vitae quam. Donec maximus, felis sit amet tincidunt pretium, justo tellus cursus ex, quis vestibulum felis risus sed velit. Vivamus varius sapien sit amet nisl iaculis, et aliquet risus lobortis. In eget ullamcorper augue. If you are interested you can call me using my email or phone number displayed on the <a id="hyperlink" href="index.html">Home</a> page.
                    </p>
                </article>

                <aside id="about-sidebar">
                    <div class="dark">
                        <img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
                        <p>
                            PERSON NAME
                        </p>
                    </div>
                </aside>
            </div>
        </section>

        <footer>
            <p>COMPANY</p>
        </footer>



    </main>
</body>

1 个答案:

答案 0 :(得分：0)

当然，只要我花了 10 分钟提出这个问题，我就在 10 秒内解决了我的问题，哈哈。

我怀疑其他人会遇到这个问题，但你永远不知道，所以我会回答它并把它留在这里给任何需要它的人。

在媒体查询部分的 CSS 文件中，我从 'aside#sidebar {' 中删除了 '#sidebar'

相关问题
最新问题