This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I have this :
.themeMenu {
width: 100%;
height: 10%;
border: 0px;
overflow: hidden;
background-color: yellow;
}
.Preview {
display: inline-block;
height: 100%;
width: 15%;
background-color: red;
margin-left: 2%;
}
.mag {
display: inline-block;
height: 100%;
width: 15%;
background-color: green;
}
.themeTitle {
display: inline-block;
height: 100%;
width: 20%;
background-color: green;
text-align: left;
}
<div class="themeMenu">
<div class="preview"></div>
<div class="mag"></div>
<div class="themeTitle">text here ruin it</div>
</div>
Problem : when I don't put text into themeTitle its aligned to the right just fine, but if I put one letter inside this div, all of it will go down so preview/mag are vertically aligned but themTitle goes down.
EDIT:
`vertical-align:top;`
will put the themeTitle in the same height with preview/mag, but the text will be on top, I need all of them to be vertically aligned to center :
( preview | mag | themeTitle )
Solve it with : vertical-align:top; , but text is still on top , so added a new h1 inside :
<div class="themeTitle"> <h1 class="fontRoundedText">ff</h1> </div>
Then on this h1 ,
.themeTitle>h1
{
vertical-align: center ;
font-size: 100%;
}
try this, just insert newline
<div class="themeMenu">
<div class="preview"></div><br>
<div class="mag"></div><br>
<div class="themeTitle">text here ruin it</div>
</div>
Related
This question already has answers here:
Make wrapper take maximum width of child image? [duplicate]
(2 answers)
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
I'm trying to center an image and put some text under it. I can get the text to the center but when I try to get it to the left or the right, it flows past the image. I'm not sure how to keep that text within the image border.
HTML:
<p align="center"><img src="/someimage.jpg" height="300" width="600">
<b>text under it</b></p>
I understand this centers the image but also the text but if i try to wrap the text in a span and tell it to float to the left or right, that's when it goes way past the image.
Is this the kind of thing you are thinking of?
I've just added display: flex to the wrapper and then flex-direction: column makes sure that they are stacked in a column (not a row).
You can then change text-align property on the b to whichever you'd like (left, center or right).
p {
display: flex;
flex-direction: column;
width: 600px;
margin: auto;
}
img {
width: 600px;
height: 150px;
}
b {
text-align: left;
}
<p align="center"><img src="http://via.placeholder.com/600x150">
<b>text under it</b></p>
is this what you want? Look at the JSFiddle below.
img {display: block;}
https://jsfiddle.net/ybq3d692/
Placing both the image and the text within a parent div of same width as that of image and giving any of text-align properties i.e., text-align: center or left or right will work..
for reference...
https://jsfiddle.net/e653vfdk/2/
/* here is the html */
<div class="container">
<div class="holder">
<img src="https://www.bmw.com.mt/content/dam/bmw/common/all-models/4-series/gran-coupe/2017/images-and-videos/images/BMW-4-series-gran-coupe-images-and-videos-1920x1200-12.jpg.asset.1519121502869.jpg" class="img1">
<div class="text">Lorem Ipsum is simply dummy text of the printing </div>
</div>
</div>
/* And here is the css */
.container
{
border: 1px solid;
padding: 20px;
}
.img1
{
width: 500px;
height: 500px;
}
.holder
{
width: 500px;
margin: 0 auto;
}
.text/*Uncomment any of the below 3 lines to see the text left-aligned, right-aligned or center-aligned whatever u want*/
{
text-align: left;
/* text-align: right; */
/* text-align: center; */
}
This is how I would approach this question:
#container {
position: relative;
display: block;
width: 600px;
margin: 0 auto;
}
#image {
position: relative;
display: block;
width: 600px;
height: 300px;
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#text {
position: relative;
display: block;
font-size: 2em;
color: red;
}
<div id="container">
<div id="image"></div>
<div id="text">
This is some text this is some text
This is some text this is some text
This is some text this is some text
</div>
https://jsfiddle.net/evkg2yz6/1/
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
As I said in the title, I am trying to center the text on a div - vertically and horizontally, but without success. Please check my code and help me to see where the problem is.
HTML Code:
<div id="wrapper">
<div id="top">
<div class="container-fluid text-center">
<div id="top-rectangle" class="mid">
<p>
Hello, text and text.
</p>
<p>
More text
</p>
</div>
</div>
</div>
CSS Code:
body {
height: 100%;
margin: 0;
}
#wrapper {
display: table;
width: 100%;
}
#top {
height: 0;
display: table-row;
vertical-align: middle;
}
#top-rectangle {
height: 450px;
background-image: url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
background-size: cover;
color: white;
}
.midSection {
text-align: center;
vertical-align: middle;
display: table-cell;
}
JSFIDDLE:
https://jsfiddle.net/krgtdomh/
Note: Please know that I searched an answer and I saw some, but I still don't understand whats wrong with my code that the text doesn't center.
Check this: https://jsfiddle.net/krgtdomh/1/
I've added:
.outer {
display: table;
position: absolute;
height: 450px;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
And I've added display:block; to #top-rectangle and changed the height to 450px.
I used this answer to get there
It looks like your CSS code is fine, but there is a mistake:
In CSS you use: midSection
In html: class="mid"
As you can see this way the names are different and css is not used, here is a fix:
https://jsfiddle.net/krgtdomh/2/
I've also added a width to your div:
#top-rectangle {
height: 450px;
width: 450px;
background-image: url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
background-size: cover;
color: white;
}
For center the div .midSection vertically and horizontally
CSS
.midSection{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ?
div {
height: 400px;
width: 800px;
background: red;
}
<div>
<h1>This is title</h1>
</div>
you can use display flex it enables a flex context for all its direct children, and with flex direction establishes the main-axis, thus defining the direction flex items are placed in the flex container
div{
height: 400px;
width: 800px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
Just do this, which works on every browser:
div{
height: 400px;
width: 800px;
background: red;
line-height: 400px;
text-align: center;
}
The line-height property specifies the line height (which centres it vertically), and the text-align:center place it directly in the centre horizontally.
<div>
<style>
div {
position: fixed;
top: 50%;
left: 50%;
}</style>
<h1>This is title</h1>
</div>
With position: fixed you set the position to a fixed value, and with top and left both set to 50% you'll get it in the middle of the screen.
Good luck coding!
Here is some more information: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
.container {
display: table;
}
.centered {
display: table-cell;
height: 400px;
width: 800px;
background: red;
text-align: center;
vertical-align: middle;
}
<div class="container">
<div class="centered">
<h1>This is title</h1>
</div>
</div>
This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 8 years ago.
How do I center a div at the middle of my page in html using CSS?
Something like www.google.com, when you go to the site, you will see the search bar and the logo are centered in the middle of the page.
Any way to go around this?
MARKUP
<div class="outer"><div class="inner">your content</div></div>
STYLE
.outer {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px;
height: 200px;
text-align: left;
}
DEMO
<div class = "center_me">Some content</div>
corresponding CSS to center the div would be,
.center_me {
dislay: table;
margin: 0px auto;
}
or,
.center_me {
display: table;
width: 50%;
}
center the div using margin : auto.
Html:
<div id="center"></div>
And css:
#center {
margin : auto;
display : inline-block;
}
Try this;
Html:
<div id="element">your element</div>
css
#element {
width: 200px;
display: block;
margin: 0 auto;
}