This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 2 years ago.
I have a row with several elements (left, center and right).
My problem is that the element in the center is not centered at the level of the screen but at the level of the row.
How can I center that element at the screen level?
When I reduce the screen (mobile) the row gains a horizontal scroll, but it is aligned to the left. Is there a way to always align it to the center and keep it responsive?
DEMO
code
<span style="width:100%; justify-content:center; display:flex">Center!!</span>
<div class="d-flex justify-content-between flex-nowrap myrow">
<div>
<span style="margin-right:10px">align me in left</span>
<span>align me in left</span>
</div>
<div>
<span>align me in center</span>
</div>
<div>
<span>align me in right</span>
</div>
</div>
Look at this example. Maybe it help you demo
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
I have this HTML:-
<hr>
<div style='display:flex;align-items:center'>
<span style=''><b>Device and Operating System Selection</b></span>
<img style='height:200px;width:120px'src='https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg'/><br/>
</div>
We offer 2 types of devices
where the result will be as follow:-
[![enter image description here][1]][1]
while i am trying to show the text in the middle of the picture and not on top of item , as follow:-
You just have to change add justify-content: center;
that will align the text in center vertically.
align-items:center; is to align the items center horizontally.
<div style='display:flex;align-items:center;justify-content: center;'>
<span style=''><b>Device and Operating System Selection</b></span>
<img style='height:200px;width:120px'
src='https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg' /><br />
</div>
Easy ;D
<hr>
<div style="display:flex;align-items:center;">
<span><b>Device and Operating System Selection</b></span>
<img style="height:200px;width:120px" src="https://****.sharepoint.com/sites/HomeOffice/en-ca/Forms/SiteAssets/bc756161-82b9-4c40-ae98-e73d54597cbe.jpg"><br>
</div>
We offer 2 types of devices
you can assign align-self style to your span
<div style='display:flex;align-items:center'>
<span style='align-self:center; margin-right:10px;'><b>Device and Operating System Selection</b></span>
<img style='height:200px;width:120px'src='https://i.gadgets360cdn.com/products/large/iqoo-3-db-386x800-1582613523.jpg'/><br/>
</div>
We offer 2 types of devices
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
Hopefully this diagram better explains my goal:
This navigation bar is also responsive; the social glyphs collapse into hamburger menu. When this happens, I would like the title to remain centred, although I can probably do this myself.
I recommend you use bootstrap to have a better layout.
for example for you, can use this:
<div class="container">
<nav class="row">
<div class="col-lg-3">
<div class="social-gylph">Twitter</div>
<div class="social-gylph">Facebook</div>
</div>
<div class="col-lg-6">
Website Title
</div>
<div class="col-lg-3">
<!-- nothing at this moment -->
</div>
</nav>
</div>
look more at: Bootstrap Layout
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I am trying to make a simple header for my webpage but I want to position my back button inside my div container such that it floats left but at the same time the "Header" text should appear in the center of the "parent div".
I tried using float left on my button but the problem is it makes the header text to wrap and the text appears off from the center of div(shifted right).
So, I tried using flex and arrived at the following code:
<div class="container">
<h2 class="alert alert-primary d-flex flex-column">
<button class="btn btn-primary align-self-start">
Go back
</button>
<div class="align-self-center">
Header
</div>
</h2>
</div>
Using flex, the header appears like this:
But here, I want the button and header to be positioned besides each other. Hence, the text must be shifted up somehow.
Can someone suggest some better alternative to this approach or how this one can be fixed?
I understand that you want to have the button on the left of the "Header" text, making the parent as having center text-align and putting the button inside the Header div and making it float:left ensures that the Heading div is not going to block align.
Also, please note that background-color:red; and background-color:green; are just to demo how is appears
.container{
background-color:red;
text-align:center;
}
.align-self-center{
background-color:green;
}
button{
float:left
}
<div class="container">
<h2 class="alert alert-primary d-flex flex-column">
<div class="align-self-center">
<button class="btn btn-primary align-self-start">
Go back
</button>
Header
</div>
</h2>
</div>
This question already has answers here:
How to vertically and horizontally center this text inside bootstrap4 columns? [duplicate]
(4 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Bootstrap 4, How do I center-align a button?
(10 answers)
Closed 5 years ago.
I have this column in my Bootstrap grid:
<div class=col-sm-2>
<div class="w-75 mx-auto">
<br><a class='button btn btn-outline-dark' href='{% url "elections:new_post" %}'>New Post</a><br><br>
<a class='button btn btn-outline-dark' href='{% url "elections:new_image" %}'>New Image</a><br><br>
<div class='card'>
<div class='card-body'>
<p>Test</p>
</div>
</div>
</div>
</div>
Because of the mx-auto, I would expect everything within those div tags to be centered, but the buttons are anchored to the left margin, as is the card and the text within the card.
How do I center the buttons and the card?
This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 9 years ago.
I have three inline-block divs like this:
<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>
I added a padding to the second div to display it a little lower, but this makes others divs to go down as well. How to make only the second div to display lower?
Here is a JSFiddle: http://jsfiddle.net/mY6hP/
The same thing was asked here, but the accepted answer suggests using absolute positioning, which i would not like to do.
Change the alignment on the other divs so they allign themselves at the top (via vertical-align:top;):
<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>
Try float:left instead of inline-block display:
<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>