CODEWITHSUNDEEP
cssreactjsjsx
Seb
Seb

Reputation: 3213

alignment of a tag and p tag not properly centered

I am trying to fix this aligment issue on my react page:

enter image description here

I tried using the code below but it's not working

<div style={{ display: "flex", alignItems: "center" }}>
    <a href="#" className="settings-link-like-btn" onClick={this.onManagePlan}>{TextContents.ManageYourPlanLink}</a>
    <p> | </p>
    <a href="#" className="settings-link-like-btn" onClick={this.onCancelMember}>{TextContents.CancelOrBreak}</a>
</div>
<div style={{ display: "flex", alignItems: "center" }}>
    <p> {TextContents.HaveSomeQ} </p>
    <a href="#" className="settings-link-like-btn" onClick={this.onQuestion}>{TextContents.ReachOut}</a>
</div>

and css

.settings-tab-right p {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    color: #616161;
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 0px;

}


.settings-tab-right a{
    background-color: transparent;
    border: none;
    color: #14cff0;
    box-shadow: 0 0 0 0 ;
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    margin-right: 10px;  
    margin-top:0px;  
}

Any idea how to make sure that <a> and <p> can be properly aligned?

Upvotes: 1

Views: 41

Answers (2)

Eric
Eric

Reputation: 1347

Adding margin-top: 0px; this may solve your problem.

.settings-tab-right p {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    color: #616161;
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-top: 0px;

Upvotes: 1

Mithun Das
Mithun Das

Reputation: 597

<div style={{ display: "flex", alignItems: "center" }}>
    <a href="#" className="settings-tab-right" onClick={this.onManagePlan}>{TextContents.ManageYourPlanLink}</a>
    <p> | </p>
    <a href="#" className="settings-tab-right" onClick={this.onCancelMember}>{TextContents.CancelOrBreak}</a>
</div>
<div style={{ display: "flex", alignItems: "center" }}>
    <p className="settings-tab-right"> {TextContents.HaveSomeQ} </p>
    <a href="#" className="settings-tab-right" onClick={this.onQuestion}>{TextContents.ReachOut}</a>
</div>

Use this Html file And use this CSS:

.settings-link-like-btn{
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    color: #616161;
    margin-left: 0px;
    margin-right: 10px;
    margin-bottom: 0px;

}


.settings-link-like-btn{
    background-color: transparent;
    border: none;
    color: #14cff0;
    box-shadow: 0 0 0 0 ;
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: left;
    margin-right: 10px;  
    margin-top:0px;  
 }

it will work! Let me know if you stuck anywhere! Happy Coding!!!

Codepen Reference: https://codepen.io/Mithunjack/pen/XWXOdya

Upvotes: 0

Related Questions