This question already has answers here:
Text floating in block next to image
(6 answers)
Closed 4 years ago.
Here is my problem(want to make that kind of thing):
Half screen image and half screen text;
That block with image and paragraph must be 50% of page;
Here is my code
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
<div class="info">
<img src="media/images/pexels-photo-316465.jpeg" alt="#" class="img-responsive">
<p>sample text</p>
</div>
use this in your css
float:left;
However; if you'd like it to be in a nicer format, you should use bootstrap which will also let you divide your layout into two section side by side.
Try this CSS instead:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.info {
font-size: 0;
}
.info img,
.info p {
width: 50%;
display: inline-block;
}
.info p {
font-size: 14px;
}
Demo: http://jsfiddle.net/GCu2D/3372/
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
i'm making this website for a school project, and i can't figure out whats wrong with the header. For some reason there is a small gap at the bottom of the header underneath the image inside it. Despite not giving the header a defined height. Anyone know how to fix this or what the problem is?
HTML:
<header id="header-wrap">
<img class="header-img" src="../images/header-img.png" alt="">
</header>
CSS:
header {
text-align: center;
grid-area: header;
}
#header-wrap {
background-color: #212635;
}
.header-img {
width: 50%;
position: relative;
}
This is how it ends up looking:
Click here
header {
text-align: center;
grid-area: header;
}
#header-wrap {
background-color: red;
}
.header-img {
width: 50%;
position: relative;
}
<header id="header-wrap">
<img class="header-img" src="https://i.stack.imgur.com/iqurS.jpg" alt="">
</header>
Images are displayed inline by default which causes a bit of extra space to be shown below the image as the vertical alignment aligns the bottom of the image with the text baseline. There are a couple of options to fix this:
Change the display mode to block
To fix it you can set the image to display: block. Then you can either center the image using margin: auto or make the header a flex container and justify-content: center.
header {
text-align: center;
grid-area: header;
}
#header-wrap {
background-color: red;
}
.header-img {
display: block;
width: 50%;
position: relative;
margin: auto;
}
<header id="header-wrap">
<img class="header-img" src="https://i.stack.imgur.com/iqurS.jpg" alt="">
</header>
Override the default vertical-align
You can also fix the issue by using vertical-align: bottom on the image if you want to keep the image inline.
header {
text-align: center;
grid-area: header;
}
#header-wrap {
background-color: red;
}
.header-img {
width: 50%;
position: relative;
margin: auto;
vertical-align: bottom;
}
<header id="header-wrap">
<img class="header-img" src="https://i.stack.imgur.com/iqurS.jpg" alt="">
</header>
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 DIV's to bottom or baseline
(11 answers)
Closed 3 years ago.
I'm trying to make a div contain inside another div using absolute however when I add a hundred percent height and width it does it the bodys size rather than 100% height and width of the div that its contained in, therefor I can't position the div at the bottom of the div it's contained in.
Does anybody know a solution for the problem I'm facing here.
.row {
width: 80%;
max-width: 1425px;
margin: 0 auto;
padding: 50px 0px;
display: flex;
}
.column {
flex: 1;
}
.halves {
display: flex;
justify-content: space-between;
}
.halves .column {
width: 50%;
}
.p1 {
height: 600px;
}
.sand {
background-color: #e4c8b8
}
img {
max-width: 100%;
max-height: 100%;
}
.info {
position: absoulute;
width: 100%;
height: 100;
bottom: 10px;
right: 10px
}
<div class="row halves">
<div class="column sand p1">
<img src="https://imgur.com/kgbkNDy.png" />
<div class="info">
<h3>Project one</h3>
</div>
</div>
</div>
Add position: relative; to the element that you want to dictate the sizing.
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:
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;
}