So I have a navbar that currently looks like this:
I'm trying to change the position of the "info" icons so that they're slightly more down than now. Ideally something like 3-5 px more down.
If I try to add like "margin-top: 5px" also the written come down with it, not solving my issues.
This is my code:
React Render:
<div className="toolbar">
<div className = "menu">
<img className = "logo" src={logo} alt="logo"onClick={refreshPage}/>
<a className = "buttons" id = "firstOne" onClick={() => this.handleClick("bubbleSort")}> Bubble Sort</a>
<info className = "info" alt="info"/>
<a className = "buttons" onClick={() => this.handleClick("selectionSort")}> Selection Sort </a>
<info className = "info" alt="info"/>
<a className = "buttons" onClick={() => this.handleClick("insertionSort")}> Insertion Sort </a>
<info className = "info" alt="info"/>
<a className = "buttons" onClick={() => this.handleClick("quickSort")}> Quick Sort </a>
<info className = "info" alt="info"/>
<a className = "buttons" onClick={() => this.handleClick("mergeSort")}> Merge Sort </a>
<info className = "info" alt="info"/>
</div>
</div>
CSS:
.toolbar {
height: 67px;
background-color: #303031;
display: flex;
align-items: center;
position: relative;
box-shadow: 0px 0px 40px -2px rgba(0,0,0,2);
z-index: 2;
position: fixed;
top: 0;
width: 100%;
}
.buttons{
/* text */
font-size: 16px;
line-height: 3.14286;
font-weight: 400;
letter-spacing: -.01em;
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
color: #9a9a95;
/*position*/
margin-right: 5px;
}
#firstOne {
margin-left: 335px;
}
.info {
width: 20px;
height: 25px;
background: url("info.png");
margin-right: 100px;
display: inline-block;
}
.logo {
position: absolute;
top: 50%;
margin-top: -33px;
margin-left: 20px;
}
I know it's a long code and a confusing CSS. I'm new to CSS and HTML coding I'm sorry if it's bad. I'd appreciate some help. Thanks a lot
Either use this:
<div style="padding-top: 5px;"><info className = "info" alt="info"/></div>
Probable in react something like this:
<div style={{padding-top: "5px"}}><info className = "info" alt="info"/></div>
Or just give .info{margin-top:5px;}
padding-top can help, but it will probably make the buttons higher. You can use
.info {
transform: translateY(3px)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.