【发布时间】：2021-07-26 23:53:15
【问题描述】：
我正在帮助某人开发他们的网站，但缺乏自学经验/刚刚接手了另一位编码员的工作。当把网站交给网站时，它在移动设备上的形状更糟（死空间太大），我似乎已经修复了，但这个居中问题我还不能处理。
我正在使用 Wordpress，并且正在搞乱 CSS 以使文本更加一致，并且代码中有很多空白点。
代码：
.logged-in header .navbar-default {
top: 0px;
}
.toppa img:hover {
opacity: 0.3;
}
.feeder {
width: 75%;
margin: 0 auto;
margin-top: 100px;
}
.bio {
padding-left: 8%;
padding-right: 8%;
}
.bio h3 {
text-align: center;
font-size: 2em;
}
.lillogo {
max-height: 35px;
width: auto;
margin-left: 90%;
}
.lillogox {
max-height: 20px;
width: auto;
margin-left: 90%;
}
.lillogo2 {
max-height: 50px;
width: auto;
margin-left: 90%;
}
.buttonup {
padding: 12px;
background-color: #efe4f1;
border-radius: 20px;
color: #000000;
margin-top: 16px;
}
.buttonup:hover {
padding: 12px;
background-color: #ffffff;
border-radius: 20px;
color: #000000;
margin-top: 16px;
}
.brander {
font-weight: 800;
text-align: right;
}
.entry-meta {
display: none;
}
.transformer {
max-width: 60%;
margin: 0 auto;
font-weight: 800;
font-style: italicize;
font-size: 1.6em;
}
.row.CC {
padding-left: 15%;
padding-right: 15%;
}
h3 {
font-size: 1.4em;
margin: 0 0 10px 0;
}
.bloxx {
background: url('http://chrisrosenthaldesign.com/demos/wilyfoxx/wp-content/uploads/2021/04/bloxxbax-1.jpg');
}
.page-id-79 .CC p {
text-align: justify;
text-justify: inter-word;}
.hometexter {
margin-bottom: 40px;
line-height: 1.6em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin: 0 auto !important;
}
.page-id-194 h1 {
font-weight: 800;
text-transform: uppercase;
margin-bottom: 12px;
}
.starter {
padding-top: 150px;
text-align: center !important;
}
.page-id-194 .starter {
padding-top: 0px;
text-align: center !important;
}
.starter img {
height: auto !important;
max-height: 80px;
width: 100% !important;
}
.page-id-194 .starter h2 {
text-align: center !important;
}
.centaur {
margin: 0 auto !important;
text-align: center !important;
}
.shrankit {
padding-left: 20%;
padding-right: 20%;
}
.ringer {
max-width: 90px;
}
.centaurer {
margin: 0 auto !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
text-align: center !important;
}
.page-id-97 {
text-align: center;
}
.row {
width: 100%;
}
.highlighter {
text-align: center;
font-size: 1.4em;
line-height: 1.8em;
}
.sb_instagram_header, .sbi_load_btn {
display: none !important;
}
body.mob-menu-overlay, body.mob-menu-slideout, body.mob-menu-slideout-over, body.mob-menu-slideout-top {
padding-top: 0px;
}
hr {
width: 100%;
height:1vh;
color: #d4bce4;
}
.page-id-93 .rowtwo h2,
.page-id-79 .rowtwo h2,
.rowthree h2,
.rowfour h2 {
text-align: center !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}
h4 {
border-bottom: 0px;
color: #ffffff;
font-weight: bold;
width: 100% ;
margin-bottom: 10px !important;
}
.spanner h2 {
text-align: center;
margin: 0 auto;
}
.page-id-103 .spanner h2 {
font-size: 1.6em;
font-weight: 800;
}
.spanner {
line-height: 1.8em !important;
text-align: center;
background-color: #efe4f1;
color: #000000;
PADDING: 20PX;
font-weight: 800;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
.logos {
border-top: 20px solid #efe4f1;
border-bottom: 20px solid #efe4f1;
margin-top: 50px;
margin-bottom: 220px;
}
.page-id-97 .spanner h2 {
line-height: 1.8em !important;
text-align: left;
}
.page-id-97 .rowtwo h2 {
line-height: 1.8em !important;
text-align: center !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
font-weight: 800;}
.page-id-97 .centaur {
margin: 0 auto !important;
text-align: center !important;
}
h3 {
width: 100% ;
line-height: 1.6em;
}
.page-id-103 h3 {
text-align: center;
}
.page-id-103 .rowtwo {
padding: 0px;
padding-top: 0px;
background-color: #000000;
}
.page-id-103 .subb h3 {
text-align: center !important;
margin-top: 46px !important;
}
.page-id-194 .rowtwo h2 {
text-align: center !important;
margin: 0 auto !important;
margin-top: 30px !important;
margin-bottom: 40px !important;
font-weight: bold;
}
header .logo-tag img{
max-height: 40px;
margin-top: 12px;
margin-left: 22px;
width: auto;
}
header .logo-tag {
float: left !important;
position: fixed;
top: 0px;
left: 0px;
z-index: 9;
}
.navbar-nav > ul {
list-style: none !important;
}
.subb img {
width: 66%;
padding-top: 32px;
}
.subbbb img {
width: 100%;
padding-top: 0px;
}
.subbbb h3 {
margin-top: -6px;
}
.navbar-nav > li {
float: left;
height: 100px;
display: inline !important;
}
.navbar-nav {
background-color: #000000;
}
#mega-menu-wrap-primary #mega-menu-primary {
position: fixed;
top: 0px;
left: 0px;
right: 0px !important;
background-color: #000000;
}
.quoter, .citer {
text-align: center;
width: 100%;
}
.quoter {
font-size: 2em;
}
.citer {
padding-bottom: 20px;
}
.row .testimonial {
border-bottom: 1px solid 000000 !important;
}
.socialbar {
position: relative;
text-align: center !important;
margin: 0 auto !important;
background-color: #000000;
color: #efe4f1;
z-index: 9;
}
.socialbar:hover {
color: rgb(191, 176, 201);
}
.socialbar {
text-align: right;
padding: 8px;
font-size: 2em;
}
#mobmenuleft .mob-expand-submenu, #mobmenuleft > .widgettitle, #mobmenuleft li a, #mobmenuleft li a:visited, #mobmenuleft .mobmenu-content h2, #mobmenuleft .mobmenu-content h3, .mobmenu-left-panel .mobmenu-display-name, .mobmenu-content .mobmenu-tabs-header li {
font-family: Open sans;
font-size: 1.3em;
font-weight: inherit;
font-style: normal;
line-height: 1.5em;
letter-spacing: normal;
text-transform: uppercase;
border-bottom: solid 1px #e9ebf5;
}
.mobmenu-content #mobmenuleft > li > a:hover {
background-color: rgb(191, 176, 201);
color: #666;
}
.main-search,
footer,
.scroll-top-wrapper,
.page-title {
display: none !important;
}
.interior {
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding-left: 9% !important;
padding-right: 9% !important;
overflow-x: hidden;
}
.container {
width: 100% !important;
max-width: 100% !important;
margin: 0% auto !important;
padding-left: 0% !important;
padding-right: 0% !important;
float:center;
overflow-x: hidden;
}
.spacer {
margin-left: 0px !important;
margin-right: 0px !important;
padding-top: 55px;
padding-bottom: 20px;
background-color: #000000;
}
.footers {
background-color: #000000;
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-top: 40px !important;
text-align: center;
color: #f1f1f1;
}
section.footers {
background-color: #000000 !important;
}
.footers .col-sm-6,
.footers .col-md-6,
.footers .col-sm-3 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100%;
}
.xer {
width: 60px;
margin-top: 8px;
}
.mailer {
width: 40px;
margin-top: 12px;
margin-bottom: 12px;
}
body {
font: 'Montserrat',sans-serif;
color: #cccccc;
background-color: #000000;
margin-top: 55px;
letter-spacing: 1px;
float:center;
width:100%;
}
#animated-example {
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease-in;
animation-delay: 1s;
width: 100%;
padding-left: 20%;
padding-right: 20%;
}
.animated2 {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease-in;
animation-delay: 2s;
width: 100%;
text-align: center;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}
.topprow {
padding: 0px;
padding-top: 12%;
background-color: #000000;
min-height: 10vh;
}
.statement {
text-align: center;
padding-top: 0px;
font-size:1.0vw;
padding-bottom: 0px;
background-color: #000000;
margin-top:-2.5vh;
}
.statement h2 {
text-align: center;
margin: 0 auto;
font-size: 5.0vh;
font-size:3.5vw;
margin-bottom: 0px;
margin-top:-4.5vh;
font-variant:small-caps;
}
.rowone, .rowtwo, .rowthree, .rowfour {
padding:0px;
margin:0px;
}
.rowtwo .row {
padding-left: 9%;
padding-right: 9%;
}
.page-id-93 .rowtwo .row {
padding-left: 2%;
padding-right: 2%;
}
.rowthree .col {
}
.rowtwo {
padding: 0px;
padding-top: 80px;
background-color: #000000;
}
.centerer h3 {
text-align: center !important;
}
.subtext {
text-align: center;
margin-bottom: 40px;
}
.rowthree {
padding: 20px;
padding-left: 5%;
padding-right: 5%;
background-color: #000000;
}
.page-id-6 .rowthree {
text-align: center;
}
.page-id-97 h1 {
text-align: center !important;
margin: 0 auto;
}
a, a:visited {
color: #efe4f1;
text-decoration: none;
}
a:hover {
color: rgb(191, 176, 201);
text-decoration: none;
}
.buttoner {
border: 1px solid rgb(220, 204, 232);
padding: 10px 30px 10px 30px;
color: rgb(220, 204, 232) !important;
}
.buttoner:hover {
border: 1px solid rgb(191, 176, 201);
color: rgb(191, 176, 201);
}
#sb_instagram .sbi_follow_btn a {
background: #C5BEE9;
color: #000000;
font-family: 'montserrat', sans-serif;
font-weight:500;
font-size:1.5vw;
font-variant:small-caps;
}
#sb_instagram .sbi_follow_btn a:hover {
background: rgb(191, 176, 201) !important;
color: #fff;
}
.blurb {
margin-bottom: 12px;
}
.rowfour {
text-align: center;
background-color: #000000;
padding: 40px;
}
.col {
min-width: auto;
}
#mobmenuright li a, #mobmenuright li a:visited, #mobmenuright .mobmenu-content h2, #mobmenuright .mobmenu-content h3, .mobmenu-left-panel .mobmenu-display-name {
font-family: Open Sans;
}
.object-fit_cover {
object-fit: cover;
height: 100%;
min-height: 1400px;
}
.page-id-79 .flip-card-front {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
font-size: 0.9em;
line-height: 2.4em;
text-align: center !important;
margin: 0px !important;
}
.kcd,
.lrh {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
overflow-y: hidden;
}
.kcd.flip-card-back,
.lrh.flip-card-back {
padding: 0px !important;
}
.flip-card {
background-color: transparent;
height: 240px !important;
perspective: 1000px;
margin-bottom: 20px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #161616;
color: #ffffff;
border: 4px solid #bfb0c9;
}
.flip-card-front {
padding-top: 60px;
padding-left: 20px;
padding-right: 20px;
font-size: 1.6em;
text-align: center !important;
margin: 0px !important;
}
.flip-card-back {
font-weight: 800;
}
.AA .flip-card-back {
background-color: #efe4f1;
color: #161616;
transform: rotateY(180deg);
padding: 20px;
line-height: 1.4em;
padding: 10%;
}
.flip-card-back {
}
.BB .flip-card-back {
background-color: #efe4f1;
color: #161616;
transform: rotateY(180deg);
padding: 10px;
line-height: 1.4em;
padding-top: 30px;
}
.CC .flip-card-back {
background-color: #efe4f1;
color: #161616;
transform: rotateY(180deg);
padding: 10px;
line-height: 1.4em;
padding-top: 30px;
}
.CCC .flip-card-back {
background-color: #838383;
color: white;
transform: rotateY(180deg);
padding: 40px;
line-height: 1.4em;
padding-top: 30px;
}
.page-id-93 {
text-align: center !important;
}
.page-id-79 .testimonials {
text-align: center !important;
}
.page-id-79 .flip-card {
width: 100%;
height: 900px;
perspective: 1000px;
margin-bottom: 20px;
}
.page-id-79 .flip-card-inner {
position: relative;
width: 100%;
height: 900px;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.page-id-79 .flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.page-id-79 .flip-card-back {
background-color: #efe4f1;
color: black;
}
@media only screen and (max-width: 1024px) {
.mob-retina-logo {
height: 49px!important;
}
.socialbar {
text-align: right;
padding: 4px;
font-size: 1.3em;
}
}
@media only screen and (max-width: 780px) {
}
@media only screen and (max-width: 480px) {
.mob-retina-logo {
height: 49px!important;
}
.col {
min-width: 100%;
}
body {
font-family: 'Montserrat',sans-serif;
color: #cccccc;
background-color: #f9f9fb;
margin-top: 55px;
letter-spacing: 1px;
}
header .logo-tag img{
max-height: 45px;
width: auto;
}
.navbar-toggle {
position: fixed;
right: 12px;
top: 1px;
}
.navbar {
min-height: 50px;
height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar-toggle {
position: fixed;
right: 12px;
top: 1px;
}
.navbar {
min-height: 50px;
height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.socialbar {
position: relative !important;
left: 0px;
right: 0px !important;
z-index: 9;
}
.socialbar {
text-align: right;
padding: 4px;
font-size: 1.3em;
}
.page-id-79 .flip-card {
background-color: transparent;
width: 100%;
height: 1000px;
perspective: 1000px;
margin-bottom: 20px;
}
.page-id-79 .flip-card-front {
padding-top: 60px;
padding-left: 20px;
padding-right: 20px;
font-size: 0.7em;
line-height: 1.6em;
text-align: center !important;
margin: 0px !important;
}
.flip-card-front {
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
font-size: 1.3em;
text-align: center !important;
margin: 0px !important;
}
h1 {
font-size: 2.1em;
text-align:center;
}
h2 {
font-size: 1.8em;
font-variant: small-caps;
}
h3 {
font-size: 1.4em;
margin: 0 0 10px 0;
}
h4 {
font-variant small-caps;
text-align:center;
margin: 0 auto;
line-height:1em;
font-size:2.2em;
margin-top:-200px;
}
.page-id-97 .rowtwo h2 {
font-size: 1.6em;
line-height: 1.4em !important;
}
.rowtwo {
padding: 0px;
padding-top: 0px;
background-color: #000000;
}
.statement h2 {
text-align: center;
margin: 0 auto;
line-height: 1.6em;
font-size: 2.4em;
}
} <div="aligncenter"><div class="container-fluid topprow">
<div class="row">
<div id="animated-example" class="animated fadeIn toppa"><a href="#jump"><img src="http://www.wilyfoxx.com/wp-content/uploads/2021/03/wilyfoxxlogoreversed1a.png" alt="" width="max" height="max" class="aligncenter size-full wp-image-167" /></a></div>
</div>
</div>
<hr>
<div class="container-fluid statement">
<div class="row" >
<h2><big><h1 style><bold>a modern agency</h1></big>
for the people, the brands, and the institutions
changing the world
<img src="http://www.wilyfoxx.com/wp-content/uploads/2021/01/wilytopp.jpg" alt="" width="max" height="max" align="center" id="start"/></h2>
<div class="container-fluid rowthree">
<div class="row feeder">
[instagram-feed]
</div>
</div>
</div>对此的任何帮助将不胜感激，我觉得我快疯了，并且已经尝试解决这个问题好几天了！
【问题讨论】：
标签： css wordpress mobile containers centering