Novice question; trying to learn web design and i've come along way. However could somebody try and explain this to me.
This is how one particular section in my website looks:
I am trying to split the image 40% of the screen and the text in the remaining 60%. It's gone well, however I cannot figure out why the text appears at the bottom and not the top? I am guessing it is very simple, or have I just messed it up?
Here is my HTML:
<section>
<div class="about">
<div class="about_img"></div>
<div class="about_text">
<h1>Some Text</h1>
<p>Some supporting text</p>
</div>
</section>
And my CSS for the section:
.about{
width: 100%;
height: 300px;
background-color: #F0F0F0;
min-height: auto;
display: inline-block;
}
.about_img{
width: 40%;
height: 100%;
background-image: url("/assets/alex-image.JPG");
background-size: cover;
display: inline-block;
}
.about_text{
width: 20%;
display:inline-block;
position: relative;
margin-left: 50px;
}
Please let me know if you need any additional information. I have also uploaded my site to http://www.alexwiley.co.uk
Thanks,
ANSWER, thanks to CBroe.
Use vertical-align: top; to align the element to the top of the block.
You may add vertical-align: top to the <div class="about_text"> to align it vertically on top.
Possible values
According to this page, other possible values you have are:
vertical-align: middle
The element is placed in the middle of the parent element
vertical-align: bottom
The bottom of the element is aligned with the lowest element on the line
vertical-align: {length}
Raises or lower an element by the specified length. Negative values are allowed
vertical-align: {X}%
Raises or lower an element in a percent of the "line-height" property. Negative values are allowed
vertical-align: sub
Aligns the element as if it was subscript
vertical-align: super
Aligns the element as if it was superscript
vertical-align: text-top
The top of the element is aligned with the top of the parent element's font
vertical-align: text-bottom
The bottom of the element is aligned with the bottom of the parent element's font
Default
the default value is:
vertical-align: baseline
Align the baseline of the element with the baseline of the parent element.
Answer
.about{
width: 100%;
height: 300px;
background-color: #F0F0F0;
min-height: auto;
display: inline-block;
}
.about_img{
width: 40%;
height: 100%;
background-image: url("http://www.alexwiley.co.uk/assets/alex-image.JPG");
background-size: cover;
display: inline-block;
}
.about_text{
width: 20%;
display:inline-block;
vertical-align: top;
position: relative;
margin-left: 50px;
}
<div class="about">
<div class="about_img"></div>
<div class="about_text">
<h1>Some Text</h1>
<p>Some supporting text</p>
</div>
</div>
You should add this css to the text to have it in the top :
vertical-align: top
Related
I am struggling centering content vertically. Here is a screenshot:
I need a float left as there will be more content on the side which you can't see but yeah how can I get this text to vertically be in the center? Also I am not sure if I do need a tag in the tag
.newsletter_text_section {
width: 40%;
float: left;
padding: 15px;
font-size:24px;
padding-right: 0 !important;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.newsletter_text_section p {
font-size:24px !important;
display: inline-block;
vertical-align: middle;
}
<!-- newsletter section -->
<div class="newsletter_section">
<div class="newsletter_text_section">
<p>Join Balance and get 20% off your first order</p>
</div>
<div class="newsletter_gif_section">
...
</div>
<div class="newsletter_input_section">
...
</div>
</div>
To solve this, the faster way is to set the same pixel for height and line-height of the element. Like this:
.box{
height : 10vh;
line-height: 10vh
}
Otherwise, you can also display: flex to layout your page, in flex scope, you can use align-item to align element vertically like this :
.box {
display: flex;
align-items: center;
justify-content: center;
}
For more detailed information, you can refer to here.
The next method is to adjust padding to your parent element since you are using the percent unit, but I don't recommend this way due to it exist side-effect sometimes.
The above content is what I think so now, hope it can help you.
Add This To The Style Of The Element:
position: absolute;
top: 50%;
Thanks,
Kamesta
I have two questions. Essentially, I want to display an image in its original size and place it in the middle of the screen(by middle I mean in the "horizontal" middle not the center of the screen), and then place a div with texts right below this image. This is the code I use:
<div class="figure">;
<img src="...">;
</div>';
<div class="text">
text here
</div>
This is the css:
.figure{
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:10px;
top:30px;
}
.figure img{
margin-left: auto;
margin-right: auto;
display: block;
height:100%;
width:100%；
}
I have two questions. The first one is when the image height is theoritcally longer than the screen height, there is no vertical scrollbar, the image just got resized to fit the screen. The second question is how can I place the text below the image without knowing the size of the image? I tried figcaption but it doesn't work.
To make it perfect center, you might need min-height: 100vh; and min-width: 100vw; then use display flex to center it. Otherwise, you might not center it vertically.
Also, move your text block inside one div with the img.
by default, the img will not resize unless you specify it.
By default div has display block so it will take the whole row, with text-align: center; it will just center your text.
.figure {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-width: 100vw;
}
.centered {
text-align: center;
}
html,
body {
padding: 0;
margin: 0;
}
<div class="figure">
<div>
<img src="http://placehold.it/950x450">
<div class="centered">
text here
</div>
</div>
</div>
First of all I I assume this does what you have in mind.
html
<img src="https://static.tumblr.com/07f1e3ffdfdd03631d00e7792ea3fa93/mja6mxp/AUUna8jev/tumblr_static_tumblr_static_88o50pnpc3k04gw0ck888o80o_640.jpg"/>
<div class="text">Isn't that pretty!</div>
CSS
body {
color: #eee;
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
}
img {
margin: 0 auto;
display: block;
}
.text {
margin: 0 auto;
display: table;
}
Your first question about why the image is resized when it's bigger than the page. I have to point out that in your CSS you set the image to be the 100% the of the possible width and height and by default, the images will be stretched to fit the element.
To answer your second question, because your "figure" div containing the img position is absolute it ignores the position of other elements. Change position to another type such as "position: relative" and it will position its self with other elements in mind.
I'm not the most confident in html and css skills but I hope my two cents at least helps you press on forward.
I have some vertically aligned text in a div that I want to remain vertically centered when the browser resizes. As the div shrinks with the browser, my text becomes offset towards the bottom of the div.
Any suggestions?
Here is a Fiddle of the issue I'm experiencing.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
CSS:
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat left top;
background-size: 100% auto;
height: 360px;
}
.inner-wrapper {
display: table;
width: 100%;
height: 360px;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: #fff;
}
Is this what you're looking for?
The text actually does center, though the background image doesn't, hence it looks like it doesn't, so here is 2 versions (fiddle use background-size: cover) where image centers too
Updated fiddle
html, body {
height: 100%;
}
.outer-wrapper {
background: url("http://paulmason.name/media/demos/full-screen-background-image/background.jpg") no-repeat center center;
background-size: 100% auto;
max-height: 360px;
height: 100%;
}
.inner-wrapper {
display: table;
width: 100%;
height: 100%;
}
.header-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1 {
color: black;
}
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header-wrapper">
<h1>
Vertically aligned text
</h1>
</div>
</div>
</div>
The problem is your background, the div is staying the same size and the text is staying centered, you background makes it seem not so. Like Gavin said use background-size cover.
Your problem isn't actually that your text isn't centered, because it is. Your actual issue is that your image doesn't have enough height at that size to fill the height of the container.
See the screenshot below, here I have used the element inspector to highlight the "outer-wrapper" which is the blue box you see. Notice the text is centered within it.
So to tackle the actual issue which is the image either needs to fill the div or needs to stay centered itself.
To stay centered add the following to the outer-wrapper: (Fiddle)
background-position: center;
To fill the div, remove the background-size from outer-wrapper and add this: (Fiddle)
background-position: center;
background-cover: cover;
I am stuck with a CSS problem and I am calling out for your expertise to help me!
I am trying to align text and image. Text and image should be vertically centered, left aligned and fit right next to each other. Both elements should be contained inside the wrapper div that can have varying width.
Below is code that I have so far:
<style>
.cell {
width: 150px;
height: 200px;
box-shadow: 0 0 0.5em #999;
white-space: nowrap;
}
.text_element {
height: 100%;
display: inline-block;
white-space: normal;
float: left;
}
.tooltip_element {
height: 100%;
display: inline-block;
}
</style>
<div class="cell">
<div class="text_element"> This is some random, random text.</div>
<div class="tooltip_element">
<img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png"/>
</div>
</div>
Above code produces next image when the wrapper content is 500px:
In the above image elements fit correctly next to each other, but aren't vertically aligned.
For width 200px, we get another problem however:
Here we get empty space between text and image, which shouldn't be there, as image should fit right next to the text. Furthermore image element is now outside the div.
Note that:
wrapper content can have varying width
solution should work in all browsers (no flex solutions)
no JS, only CSS can be used
Thank you very much for your help!
EDIT:
Text should be left aligned!
Ok, here it is:
.cell {
width: 210px;
height: 200px;
box-shadow: 0 0 0.5em #999;
white-space: nowrap;
padding-right: 30px;
}
.text_element {
display: inline-block;
white-space: normal;
float: left;
text-align: justify;
position: relative;
}
.tooltip_element {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
<div class="cell">
<div class="text_element">This is some random, random text. Moar random text. And moar, moar random text...
<div class="tooltip_element">
<img src="http://www.sainsburysbank.co.uk/library/default/images/life-insurance/icon-tooltip.png" />
</div>
</div>
</div>
Please note I included the tooltip element inside the text element. So I could vertically align them. If they must be siblings, I'd need to wrap them both in a container for vertical centering without flex-box.
If you prefer jsFiddle, to play around with cell width, here it is.
You can use css table https://jsfiddle.net/2Lzo9vfc/247/
CSS
.cell {
width: 100%;
height: 200px;
box-shadow: 0 0 0.5em #999;
word-break:break-all;
}
.text_element {
display: table-cell;
vertical-align: middle;
}
.tooltip_element {
display: table-cell;
vertical-align: middle;
}
I am trying to center text(horizontal and vertical) and I am having a little difficulty with this.
This is what I have tried but is only centering it horizontally, not vertically.
How can I get this text in the center?
<div class="playerDetailsPage">
<p>
<h4>The text will be in the center</h4>
</p>
</div>
css
.playerDetailsPage {
background-color: #edd4d4;
width: 630px;
height: 390px;
text-align: center;
vertical-align: middle;
line-height: 390px;
}
Don't use tables for this kind of things. It isn't something you can solve by using a table.
For what I can see, it is working perfect. Here is a working example: http://jsfiddle.net/T7V58/1/
Your code is correct, what is the problem? Just remove the p tag and you are there.
<div class="playerDetailsPage">
<h4>The text will be in the center</h4>
</div>
CSS:
.playerDetailsPage {
background-color: #edd4d4;
width: 630px;
height: 390px;
text-align: center;
vertical-align: middle;
line-height: 390px;
}
Vertical align middle will do nothing on a div (do nothing on a display:block element exactly). vertical aligning works with table cells. The example posted on the comment aligns the h4 becouse the line height is exactly the same as the height of the parent div. But what happens when you have two (or more) lines text? That will break.
The solution:
<div class="parent">
<div class="aligner">
<h4>The text will be in the center which can be several lines long, and will not break the verical centering. Lorem ipsum more text.</h4>
</div>
</div>
.parent {
background-color: #edd4d4;
width: 630px;
height: 390px;
text-align: center;
}
.parent .aligner {
display: table-cell;
height: inherit;
width: inherit;
vertical-align: middle;
}
You should use an internal aligner div and display it as a table cell (so vertcal align will work. You must specify the height and width of the internal element but fortunately inheritane comes to the rescue (so you don't have to redundantly specify it again).
Hope it helps!