Question

当媒体查询i时，我在将div水平居中时遇到麻烦，这很可能是愚蠢的，但这是我正在尝试的...我一直在努力完成这一天。

它只是一直将顶部div浮动在左侧，将右侧div浮动在右侧。我尝试使用position：absolute将其设置为中心，但这只会使它们居中。

以下是我尝试过的HTML和CSS，还有其他一些尝试，例如使用。.

margin: 0 auto;
position: absolute;
left: 0;
right: 0;

非常感谢您的帮助。

HTML ：

<div class="body-quote">
        <div class="body-quote-title">
            <p>Get your website up and running fast!</p>
        </div>
        <div class="body-quote-subtitle">
            <p>Relieve some stress, and let us do the work for you.</p>
        </div>
        <div class="body-quote-body">
            <button type="button" class="btn btn-primary btn-lg" id="free-quote">Get a free quote</button>
            <button type="button" class="btn btn-primary btn-lg" id="schedule-appointment">Schedule an appointment</button>
        </div>
    </div>

    <div class="body-help">
        <div class="body-help-title">
            <p>Need some help?</p>
        </div>
        <div class="body-help-subtitle">
            <p>Feel free to contact us anytime using the contact form, or via our chat system.</p>
        </div>
        <div class="body-help-body">
            <button type="button" class="btn btn-primary btn-lg" id="help-contact">Contact Us</button>
            <p>Click the button in the bottom right of your screen to engage in a conversation with one of our representatives.</p>
        </div>
    </div>

CSS ：

    body {
    margin: 0;
    background-image: url("../images/CrystalDevLogo.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #4484CE;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #3a88e3;}

ul.topnav li a.active {background-color: #D9D9D9;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}

.cover-image {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: -1;
}

.cover-image img {
    width: 100%;
    height: auto;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: -1;
}

#alert-motd {
    text-align: center;
    overflow: hidden;
    position: relative;
    height: 50px;
}

#alert-motd p {
    font-size: 18px;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%); 
    transform:translateX(100%);
    /* Apply animation to this element */   
    -moz-animation: scroll-left 25s linear infinite;
    -webkit-animation: scroll-left 25s linear infinite;
    animation: scroll-left 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

@media all and (max-width: 1690px) {
    .body-quote {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-quote-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-body {
    height: auto;
    width: auto;
    text-align: center;
    padding-bottom: 8px;
}

.body-quote-body #free-quote {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-quote-body #schedule-appointment {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-help {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-help-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-body {
    height: auto;
    width: auto;
    text-align: center;
    padding: 0px 8px 0px 8px;
    color: white;
}

.body-help-body p {
    padding: 8px 8px 0px 8px;
}

.body-help-body #help-contact {
    border-radius: 15px;
    background-color: #24BF39;
}
}

@media all and (max-width: 1280px) {
    .body-quote {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-quote-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-body {
    height: auto;
    width: auto;
    text-align: center;
    padding-bottom: 8px;
}

.body-quote-body #free-quote {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-quote-body #schedule-appointment {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-help {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-help-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-body {
    height: auto;
    width: auto;
    text-align: center;
    padding: 0px 8px 0px 8px;
    color: white;
}

.body-help-body p {
    padding: 8px 8px 0px 8px;
}

.body-help-body #help-contact {
    border-radius: 15px;
    background-color: #24BF39;
}
}
@media all and (max-width: 980px) {

}
@media all and (max-width: 736px) {

}
@media all and (max-width: 480px) {
.body-quote {
    margin: 0 auto;
    width: 280px;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-quote-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-body {
    height: auto;
    width: auto;
    text-align: center;
    padding-bottom: 8px;
}

.body-quote-body #free-quote {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-quote-body #schedule-appointment {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-help {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-help-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-body {
    height: auto;
    width: auto;
    text-align: center;
    padding: 0px 8px 0px 8px;
    color: white;
}

.body-help-body p {
    padding: 8px 8px 0px 8px;
}

.body-help-body #help-contact {
    border-radius: 15px;
    background-color: #24BF39;
}
}

Answer 1

您已经忘记了它们仍在浮动。

设置float:none;，然后使用margin:auto;将其固定在中间；

尝试一下。

body {
    margin: 0;
    background-image: url("../images/CrystalDevLogo.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #4484CE;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #3a88e3;}

ul.topnav li a.active {background-color: #D9D9D9;}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}

.cover-image {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: -1;
}

.cover-image img {
    width: 100%;
    height: auto;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: -1;
}

#alert-motd {
    text-align: center;
    overflow: hidden;
    position: relative;
    height: 50px;
}

#alert-motd p {
    font-size: 18px;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: center;
    /* Starting position */
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%); 
    transform:translateX(100%);
    /* Apply animation to this element */   
    -moz-animation: scroll-left 25s linear infinite;
    -webkit-animation: scroll-left 25s linear infinite;
    animation: scroll-left 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

@media all and (max-width: 1690px) {
    .body-quote {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-quote-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-body {
    height: auto;
    width: auto;
    text-align: center;
    padding-bottom: 8px;
}

.body-quote-body #free-quote {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-quote-body #schedule-appointment {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-help {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-help-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-body {
    height: auto;
    width: auto;
    text-align: center;
    padding: 0px 8px 0px 8px;
    color: white;
}

.body-help-body p {
    padding: 8px 8px 0px 8px;
}

.body-help-body #help-contact {
    border-radius: 15px;
    background-color: #24BF39;
}
}

@media all and (max-width: 1280px) {
    .body-quote {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-quote-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-body {
    height: auto;
    width: auto;
    text-align: center;
    padding-bottom: 8px;
}

.body-quote-body #free-quote {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-quote-body #schedule-appointment {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-help {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-help-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-body {
    height: auto;
    width: auto;
    text-align: center;
    padding: 0px 8px 0px 8px;
    color: white;
}

.body-help-body p {
    padding: 8px 8px 0px 8px;
}

.body-help-body #help-contact {
    border-radius: 15px;
    background-color: #24BF39;
}
}
@media all and (max-width: 980px) {

}
@media all and (max-width: 736px) {
  .body-quote, .body-help {  float: none; margin:auto;}

}
@media all and (max-width: 480px) {
.body-quote {
    margin: 0 auto;
    width: 280px;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-quote-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-quote-body {
    height: auto;
    width: auto;
    text-align: center;
    padding-bottom: 8px;
}

.body-quote-body #free-quote {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-quote-body #schedule-appointment {
    border-radius: 15px;
    background-color: #24BF39;
}

.body-help {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 280px;
    height: auto;
    background-image: linear-gradient(#17A3DC, #157DA8);
    border-radius: 15px;
    box-shadow:
    0px 2px 2px 5px #555,
    0px 4px 4px 5px #555,
    0px 6px 6px 5px #555,
    0px 8px 8px 5px #555;
}

.body-help-title {
    text-align: left;
    font-size: 30px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-subtitle {
    text-align: left;
    font-size: 16px;
    width: auto;
    height: auto;
    color: white;
    padding: 0px 8px 0px 8px;
}

.body-help-body {
    height: auto;
    width: auto;
    text-align: center;
    padding: 0px 8px 0px 8px;
    color: white;
}

.body-help-body p {
    padding: 8px 8px 0px 8px;
}

.body-help-body #help-contact {
    border-radius: 15px;
    background-color: #24BF39;
}
}

<div class="body-quote">
        <div class="body-quote-title">
            <p>Get your website up and running fast!</p>
        </div>
        <div class="body-quote-subtitle">
            <p>Relieve some stress, and let us do the work for you.</p>
        </div>
        <div class="body-quote-body">
            <button type="button" class="btn btn-primary btn-lg" id="free-quote">Get a free quote</button>
            <button type="button" class="btn btn-primary btn-lg" id="schedule-appointment">Schedule an appointment</button>
        </div>
    </div>

    <div class="body-help">
        <div class="body-help-title">
            <p>Need some help?</p>
        </div>
        <div class="body-help-subtitle">
            <p>Feel free to contact us anytime using the contact form, or via our chat system.</p>
        </div>
        <div class="body-help-body">
            <button type="button" class="btn btn-primary btn-lg" id="help-contact">Contact Us</button>
            <p>Click the button in the bottom right of your screen to engage in a conversation with one of our representatives.</p>
        </div>
    </div>

codepen：https://codepen.io/anon/pen/QJYjpQ

在div外水平居中

1 个答案: