I want to put all the header (text and pic) on the same line and in the middle of the header, but only the pic stay in the middle and no matter what I do the text still stay at the bottom of the header, someone maybe know how to solve it?
body {
direction: rtl;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* להשיג רישיון לפונט SPECTRUM FM */
}
.header {
background-color: rgb(209, 45, 33);
}
.icon {
margin-top: 20px;
margin-bottom: 20px;
width: 150px;
padding-left: 10px;
}
.icon:hover {
width: 170px;
transition: 0.5s;
}
.headTxt {
font-weight: bold;
font-size: 35px;
color: rgb(234, 234, 234);
padding: 10px;
margin-bottom: 50px;
}
.headTxt:link {
text-decoration: none;
}
.headTxt:hover {
color: black;
font-size: 40px;
transition: 0.5s;
}
.divHeader {
display: inline-block;
}
<div align="center">
<a href="index.html">
<img src="pics/icon.png" >
</a>
<div >
<a href="index.html" >
בית
</a>
<a href="" >
היציע המזרחי
</a>
<a href="" >
חברות
</a>
<a href="" >
תמונות
</a>
<a href="" >
צור קשר
</a>
</div>
</div>
CodePudding user response:
Change as below.
HTML
<div >
<a href="index.html">
<img src="pics/icon.png" >
</a>
<div >
<a href="index.html" >
בית
</a>
<a href="" >
היציע המזרחי
</a>
<a href="" >
חברות
</a>
<a href="" >
תמונות
</a>
<a href="" >
צור קשר
</a>
</div>
</div>
CSS
body {
direction: rtl;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-
serif;
/* להשיג רישיון לפונט SPECTRUM FM */
}
.header {
background-color: rgb(209, 45, 33);
display: flex;
align-items: center;
justify-content: center;
}
.icon {
margin-top: 20px;
margin-bottom: 20px;
width: 150px;
padding-left: 10px;
}
.icon:hover {
width: 170px;
transition: 0.5s;
}
.headTxt {
font-weight: bold;
font-size: 35px;
color: rgb(234, 234, 234);
padding: 10px;
margin-bottom: 50px;
}
.headTxt:link {
text-decoration: none;
}
.headTxt:hover {
color: black;
font-size: 40px;
transition: 0.5s;
}
.divHeader {
display: inline-block;
}
Output
CodePudding user response:
body {
direction: rtl;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-
serif;
/* להשיג רישיון לפונט SPECTRUM FM */
}
.header {
background-color: rgb(209, 45, 33);
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
}
.icon {
margin-top: 20px;
margin-bottom: 20px;
width: 150px;
padding-left: 10px;
}
.icon:hover {
width: 170px;
transition: 0.5s;
}
.headTxt {
font-weight: bold;
font-size: 35px;
color: rgb(234, 234, 234);
padding: 10px;
margin-bottom: 50px;
}
.headTxt:link {
text-decoration: none;
}
.headTxt:hover {
color: black;
font-size: 40px;
transition: 0.5s;
}
.divHeader {
display: inline-block;
}
<div >
<a href="index.html">
<img src="pics/icon.png" >
</a>
<div >
<a href="index.html" >
בית
</a>
<a href="" >
היציע המזרחי
</a>
<a href="" >
חברות
</a>
<a href="" >
תמונות
</a>
<a href="" >
צור קשר
</a>
</div>
</div>