CODEWITHSUNDEEP
htmlcss
Paul Timis
Paul Timis

Reputation: 71

move a div with display flex to around the center of the page

I was looking for a while, maybe i'm not searching correctly, can you please help with something

As it can be seen in the below image, i want to move those arrows to that position i have display flex set, see code below

arrows

<div class="divarrows">
   <p class="arrow1">&#9655;</p>
   <p class="arrow2">&#9655;</p>
</div>

and the css

.arrow1 {
    transform: scaleX(-1);
    font-weight: bold;
}

.arrow2 {
    font-weight: bold;
}

.arrow1:hover, .arrow2:hover {
    color: #54B3A1;
}

.divarrows{
    display: flex;
    justify-content: space-between;
    margin: 30px;
    align-self: center;
}

Upvotes: 0

Views: 538

Answers (3)

Adrian
Adrian

Reputation: 152

If u really need to move those arrows up, it can be done without flexbox. Try using margin-top with a negative value. For example (see code below)

.arrow1 {
    transform: scaleX(-1);
    font-weight: bold;
    margin-top: -350px;     
}

.arrow2 {
    font-weight: bold;
    margin-top: -350px;
}

.arrow1:hover, .arrow2:hover {
    color: #54B3A1;
}

.divarrows{
    display: flex;
    justify-content: space-between;
    margin: 30px;
    align-self: center; 
}

<div class="divarrows">
   <p class="arrow1">&#9655;</p>
   <p class="arrow2">&#9655;</p>
</div>

Upvotes: 2

Mostafa
Mostafa

Reputation: 11

Try to add the align-items :center will fix the problem .arrow1,.arrow2{align-self;center;}

Upvotes: 0

C0G1T0
C0G1T0

Reputation: 350

Adding align-items: center to divarrows should fix the problem.

.divarrows{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px;
    align-self: center;
}

If you have some kind of conflict with other element which need to be at the top for example, you can simply target each arrows:

.arrow1, .arrow2 {
    align-self: center;
}

Upvotes: 0

Related Questions