我已经上传了一个页面的代码。我的目标是从左边和右边创建边距。这个想法是使内容与边距居中。我有一个css代码,但请记住,有额外的代码,导致其他页面以及。
为了了解需要实现的目标,我上传了一个模仿我目标的网站链接。https://aliabdaal.com
.navbar1 {
padding: 0;
margin: 0;
}
.nav {
text-align: center;
}
#backroundcolourthing {
background-color: rgb(247, 251, 255);
padding: 10px;
border: 0px solid green;
width: auto;
height: 550px;
}
nav {
display: flex;
/* 1 */
justify-content: space-between;
/* 2 */
padding: 1rem 2rem;
/* 3 */
background: rgb(245, 250, 255);
/* 4 */
}
.barsection {
margin: right;
}
nav ul {
display: flex;
/* 5 */
list-style: none;
/* 6 */
margin: auto;
}
nav li {
padding-left: 3rem;
/* 7! */
margin: 3%;
margin-left: 20px;
}
nav a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: sans-serif light;
}
.aboutmeh2 {
font-size: 40px;
font-family: Optima;
text-align: center;
}
.shortsryh2 {
font-size: 20px;
font-family: Optima;
text-align: center;
}
.para2 {
max-width: 900px;
min-width: 100px;
max-height: 1000px;
min-height: 900px;
background-color: rgb(255, 255, 255);
}
.a {
font-size: 20px;
font-family: sans-serif light;
color: rgb(24, 24, 24);
text-align: left;
margin-top: 4rem;
}
.headingforsmth {
font-size: 25px;
text-align: center;
}
.centerimgonline {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.introname {
font-size: 40px;
font-family: Tahoma;
text-align: center;
}
.introphrase1 {
font-size: 28px;
font-family: Optima;
text-align: center;
}
.introphrase3 {
font-size: 20px;
font-family: Optima;
text-align: center;
}
.post-header {
margin: 0 -1rem;
width: calc(100% + 2rem);
padding: 3rem 1rem;
background-color: rgb(255, 255, 255);
}
.home__video,
.home__intro {
margin: 0;
width: 46%;
}
.container {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
.para1 {
max-width: 900px;
min-width: 100px;
max-height: 1000px;
min-height: 900px;
background-color: rgb(228, 228, 228);
}
.table-of-contents {
padding: 2rem;
background-color: green;
}
.post-content {
line-height: 1.7;
}
.para3 {
max-width: 900px;
min-width: 100px;
max-height: 1000px;
min-height: 900px;
background-color: rgb(118, 122, 179);
}
.myphoto {
display: flex;
flex-direction: column;
margin: -14em auto;
margin-left: 90em;
max-width: 1140px;
width: 39%;
z-index: -1;
transform: rotate(-20deg);
}
.myclass {
color: rgb(61, 88, 124);
}
<div id="backroundcolourthing">
<div class="navabr1">
<nav>
<div class="logo">
<div>
<h2>VovaSite</h2>
</div>
</div>
<div class="barsection">
<div class="nav-wrapper">
<ul class="nav">
<li>
<a href="Homepage.html">Home</a>
</li>
<li>
<a href="aboutme.html">About</a>
</li>
<li>
<a href="articles.html">articles</a>
</li>
<li>
<a href="articles.html">articles</a>
</li>
<li>
<a href="articles.html">articles</a>
</li>
<li>
<a href="articles.html">articles</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<div>
<div class="home__intro">
<h2 class="introname"> Hi guys - </h2>
<p class="introphrase1"> I'm name. I am a soon-to-be-
<a class="myclass" href="http://www.google.com">Youtuber.</a>
</p>
<p class="introphrase3">
something text boring intresting information lol
</p>
</div>
<div>
<div class="home__video">
<img class="myphoto" alt="Pacific" src="img4.jpg" style="
border-radius: 10px; transform:rotate(0deg);">
</div>
</div>
</div>
</div>
</div>
3条答案
按热度按时间laximzn51#
如果我能理解你的话,在这个例子中,你可以定义一个百分比宽度,然后在css中添加一个新的自动边距规则,这将使你的内容居中。(对于我的英语,我很抱歉,我希望你能理解我)
Ej:
f0brbegy2#
在你的
<ul class="nav">
中,你可以把css放在下面:在我看来,这是最好的方法,但您可以像
margin: 0 auto
那样添加边距。x4shl7ld3#