Я пытаюсь создать знак плюса, который должен быть расположен рядом с тегом h3, пока что знак плюс остается над h3, и это довольно раздражает. Я попытался применить margin и padding top, line-height, но он все еще не выравнивается. Как я могу выровнять их на одной линии? Я говорю об этой строчке здесь: <h3 class="second-section-right-part-h3"><span class="plus alt"></span> Sub-Affiliation</h3>
вот мой html `
* {
padding: 0px;
margin: 0px;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
justify-content: space-evenly;
width: 100%;
height: 50%;
}
.header {
height: 8%;
}
.nav-h1 {
text-align: center;
margin-top: 27px;
font-size: 40px;
}
a {
display: inline-block;
margin: 10px;
font-family: 'Segoe UI', sans-serif;
font-family: SegoeUI;
font-size: 16px;
font-weight: bold;
color: black;
font-weight: bold;
}
.a-container {
margin-left: 10%;
margin-top: 27px;
}
.footer {
background-color: #e8e8e8;
height: 100%;
width: 100%;
padding-bottom: 0px;
}
.alignleft {
margin-left: 8%;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: #000000;
}
.alignright {
margin-right: 8%;
display: flex;
flex-direction: row;
}
.logo-section {
margin-top: 1.3%;
margin-left: 2%;
}
.logo-img {
padding: 6px;
}
.first-section {
width: 100%;
background-image: url("/assets/images/first-image.png");
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
.first-section-p {
width: 400px;
height: 314px;
margin-left: 10%;
padding-top: 10%;
font-family: SegoeUI;
font-weight: 900;
font-size: 4vh;
font-weight: 900;
text-align: center;
color: #262262;
}
.small-button {
width: 331px;
height: 92px;
margin-left: 12%;
background-color: #e7af17;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: white;
border: none;
}
.second-section-text {
color: #e8e8e8;
font-weight: 900;
font-size: 70px;
line-height: 0.7;
font-family: SegoeUI;
margin-left: 12%;
}
.content {
min-height: 100%;
}
@media (min-width: 1281px) {
.first-section {
width: 100%;
height: 800px;
background-image: url("/assets/images/first-image.png");
background-repeat: no-repeat;
background-size: cover;
}
.small-button {
width: 331px;
height: 92px;
margin-top: 8%;
margin-left: 12%;
background-color: #e7af17;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: white;
border: none;
}
}
@media (min-width: 940px) {
.small-button {
width: 331px;
height: 92px;
margin-top: 8%;
margin-left: 12%;
background-color: #e7af17;
font-family: SegoeUI;
font-size: 18px;
font-weight: 900;
color: white;
border: none;
}
}
.second-section {
margin-top: 100px;
display: flex;
justify-content: center;
}
.third-section {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 50px;
margin-top: 100px;
background-color: #e8e8e8;
}
.third-section-right-part {
margin-left: 50px;
margin-top: 5%;
}
.third-section-right-part-img {
height: 300px;
width: 300px;
}
.third-section-left-part {
width: 20%;
margin-top: 3%;
}
.forth-section {
height: 500px;
width: 100%;
display: flex;
justify-content: center;
}
.info-box {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 50px;
width: 70%;
background-color: #e7af17;
}
.info-box-content {
text-align: center;
}
button {
width: 330px;
height: 65px;
background-color: #ffffff;
font-size: 28px;
font-weight: bold;
color: #262262;
border: none;
text-transform: uppercase;
}
.info-box-content-h1 {
color: #ffffff;
font-family: SegoeUI;
font-size: 60px;
font-weight: bold;
}
.info-box-content-p {
font-family: SegoeUI;
font-size: 20px;
font-weight: 300;
font-stretch: normal;
color: #ffffff;
}
.message {
width: 60%;
margin-left: 10%;
}
.second-section-right-part {
width: 50%;
margin: 0 auto;
margin-left: 30%;
}
.second-section-right-part-h3 {
margin-top: 30px;
color: #262262;
font-weight: bold;
}
.second-section-right-part-p {
margin-top: 30px;
}
.plus {
display: inline-block;
width: 50px;
height: 50px;
background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), #000;
background-position: center;
background-size: 50% 2px, 2px 50%;
/*thickness = 2px, length = 50% (25px)*/
background-repeat: no-repeat;
}
.alt {
background: linear-gradient(#000, #000), linear-gradient(#000, #000);
background-position: center;
background-size: 50% 2px, 2px 50%;
/*thickness = 2px, length = 50% (25px)*/
background-repeat: no-repeat;
}
<div class="main-container">
<div class="headers">
<div class="nav">
<h1 class="nav-h1">Logo</h1>
<div class="a-container">
<a>About</a>
<a>Vision</a>
<a>Solutions</a>
<a>Technology</a>
<a>Contact</a>
</div>
<div class="logo-section">
<img class="logo-img" src="/assets/images/facebook.png" alt="facebook logo">
<img class="logo-img" src="/assets/images/linkedin.png" alt="linkedin logo">
</div>
</div>
</div>
<div class="content">
<div class="content-inside">
<div class="first-section">
<p class="first-section-p">Turnkey platforms <br> for businesses looking to rule the online market
<button class="small-button">LEARN MORE</button>
</p>
</div>
<div class="second-section">
<!-- <div class="second-section-paragraphs">
<p class="second-section-text">WHAT</p>
<p class="second-section-text">WHE DO</p>
<p class="second-section-text">BEST</p>
</div> -->
<div class="second-section-right-part">
<section class="second-section-right-part">
<div>
<h3 class="second-section-right-part-h3">Social Media</h3>
<p class="second-section-right-part-p">Social Media Offering a 360 degree solution to generating exposure via Social Media Marketing. Using both ATL and BTL strategies in large social networks such as Facebook and Linkedin but also in small networks when seeking a specific demographic
target.</p>
</div>
</section>
<section class="second-section-right-part">
<div>
<h3 class="second-section-right-part-h3"><span class="plus alt"></span> Sub-Affiliation</h3>
<p class="second-section-right-part-p">Sub-Affiliation Genuinely strengthen your brand and jump start traffic with an affiliate program. Link with a large scale business led supply chain, monitor activity and generate returns through an exponentially growing platform.
</p>
</div>
</section>
<section class="second-section-right-part">
<div>
<h3 class="second-section-right-part-h3">Mobile Adds</h3>
<p class="second-section-right-part-p">Mobile Adds A multi-channeled platform tailor made for the mobile environment allowing ease of access, real time delivery and results driven optimization solutions allowing for cost efficient lead capture.</p>
</div>
</section>
</div>
</div>
<div class="third-section">
<div class="third-section-left-part">
<h4 class="second-se">Leading The Way</h4>
<br>
<p> Dark Side management is a dynamic Online Media Powerhouse fueled with passion for developing and growing online businesses into world renowned enterprises. Putting a strong accent on online marketing solutions, Vici is one step ahead of the
game with superior data management systems and prompt on key response time.<br><br> Streamlined by future oriented workflow methodology, Vici are a resilient group of focused and dedicated specialists that have a profound understanding of
their duties and priorities.</p>
</div>
<div class="third-section-right-part">
<section>
<img src="/assets/images/cospace.png" alt="" class="third-section-right-part-img">
</section>
</div>
</div>
<div class="forth-section">
<div class="info-box">
<div class="info-box-content">
<h1 class="info-box-content-h1">The Mission is Simple</h1>
<p class="info-box-content-p">
To Strategically Drive The Online Community Forward, Through A Wide Spectrum Integrating Market Intelligence And Experience Throughout, By Offering Unparalleled Resources And A True Understanding Of The Client’s Arena. </p>
<br>
<button>Contact Us </button>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="nav">
<h5 class="nav-h1">Logo</h5>
<div class="a-container">
<a>About</a>
<a>Vision</a>
<a>Solutions</a>
<a>Technology</a>
<a>Contact</a>
</div>
<div class="logo-section">
<img class="logo-img" src="/assets/images/facebook.png" alt="facebook logo">
<img class="logo-img" src="/assets/images/linkedin.png" alt="linkedin logo">
</div>
</div>
<p class="message">*Please read the Privacy Policy and Terms & Conditions before continuing. <br> Use of our Services and Brokers websites is at your own risk. Information on our Website, applications and any marketing or email marketing material is strictly for information
purposes and should not be construed as professional advice nor as an offer to engage in online trading, which may result in substantial or complete loss of funds.
</p>
</div>
</div>