Looking to have an image (logo) on the left side of a div with text (a title) centered on the div. A basic question, but some caveats.
If I use position: absolute on the image, the text is centered, but when I resize the window the image covers the text. Want this to be a responsive page where the text is centered until it hits the image and the won't overlap. https://jsfiddle.net/mwqwmkdm/
If I use float: left on the image, then the text is not really perfectly centered. https://jsfiddle.net/mwqwmkdm/1/
I could create a margin-right of equal size on the other side of the text, but then I'm wasting those pixels on smaller displays and I don't want to do that. Eventually, it will be more than that one line I am centering. https://jsfiddle.net/mwqwmkdm/2/
Basically, I want:
the text centered as long as the screen is wide enough
the text to wrap around the image and not be in front of or behind it when the screen isn't wide enough
not to lose any screen space except for the image itself
Thanks
If you're willing to try an alternative to CSS float and positioning properties you can easily accomplish your task with CSS Flexbox. Code is clean, simple, efficient and easy to maintain. Also, flexbox is now supported by all major browsers.
DEMO
HTML
<div id="container">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<p>centered text</p>
</div>
CSS
#container {
display: flex;
border: 2px solid black;
background-color: aqua;
}
img {
margin: 10px;
}
p {
border: 1px dashed red;
padding: 5px;
flex-grow: 1;
text-align: center;
}
UPDATE
Here's one way to keep your text centered on the full width of the container, while not allowing the text and image to overlap on smaller screens. No flexbox, no deprecated tags. Just a very simple media query.
Wide screen
Narrow Screen
DEMO
Flex box has compability problems with some browser. Just Create BFC for the <center></center> using overflow:hidden;
Check this out! jsfiddle
You can use flexbox like this:
.wrapper{
display: flex;
}
.content{
flex-grow: 1;
text-align: center;
}
<div class="wrapper">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
Centered Text
</div>
</div>
Check this out for more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Edit:
To center it respect to the container you can use a modification of you second example using float: left but instead to set the margin to the center you would put the text in a span and set the margin-right to it like this:
img {
float: left;
}
.content {
text-align: center;
}
.content span{
margin-right: 100px;
}
<div>
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
<span>Centered Text</span>
</div>
</div>
Related
I know this is probably a common question, but I just can't figure it out or find it on this site already.
HTML:
<div id="header-bg" >
<img class="pic" src="https://upload.wikimedia.org/wikipedia/en/e/e9/Rosalind_Franklin_%281920-1958%29.jpg" alt="Portrait of Rosalind Franklin with her hand on her chin, looking off to the left.">
</div>
CSS:
#header-bg {display: flex; height: 100px; background: #AAB4AF; align-items: center;}
.pic { width: 600px; padding: 10px; margin: auto;}
The height of your #header-bg is smaller than your image, so your text is overlapping the image.
If you want text to be hidden underneath picture you have to change it's z-index to the value lower than tag containing picture.
You can read more here: https://www.w3schools.com/cssref/pr_pos_z-index.asp
I have the following: jsfiddle.net
What I'm trying to do is have the image float left of the text such that it fills the parent (.box). Note that the .box can vary in height depending on the number of lines of text.
The end result should look like this:
How would this be done?
.box {
position: relative;
display: block;
width: 600px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid red;
}
.img {
float: left;
}
.text {
font-size: 14px;
}
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box is one line.</div>
</div>
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>
You can use display: table on the parent element and display: table-cell on the children.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
figure {
display: table;
width: 600px;
height: auto;
margin-bottom: 24px;
border: 2px solid red;
}
img {
float: left;
display: table-cell;
min-height: 100%;
margin-right: 20px;
}
figcaption {
font-size: 14px;
height: 100%;
}
</style>
</head>
<body>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box is one line.</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
</figure>
</body>
</html>
As far as I know there is no HTML/CSS only solution to make this work - correct me if I'm wrong. The OP wants to have an image with unknown size dynamically scaled to the parent's container's height. This container on the other hand depends dynamically on the text length and has no fixed height. The image size can vary, the text size can vary.
Here a proof of concept solution using jQuery and <img> instead of background-image with the following result:
HTML:
<div class="box">
<img class="img" data-src='https://placehold.it/500x500'>
<div class="text">This box is one line.</div>
</div>
JavaScript / jQuery
var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
var heightParent = $boxes.eq(i).outerHeight() - 4;
// -4 because of border 2px top + 2px bottom
$imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
$imgs.eq(i).height(heightParent);
}
CSS (only changed part):
.img {
float:left;
margin-left: -24px;
margin-top: -24px;
margin-right: 10px;
}
It's not such a trivial thing to achieve what you want as you don't want to set height. Not on the image and not on the parent container.
Problems using background-image:
With the background-image approach it would easy be possible to position the image correctly scaled to the left with position:absolute, but the margin to the right (to the text) would not work, as the width can be different.
Problems using img:
On the other side with the use of <img> you have the problem, that the parent <div> will always be in the original height of the image, as long as no parent has a fixed height - which is the case in your example.
JavaScript for partly making it work:
To avoid this you can avoid the creation of the image on page load by setting the url to a data attribute, I called it data-src. Now when the page is load, you can look for the parent's <div> natural height. Next you pass the URL from the data-src attribute to the src attribute so that the image is rendered.
As we know the former parent's height we can set it as the image height.
The CSS negative margins are there to undo your setting of padding: 24px on the parent's container so that the image is correctly positioned. If you ask yourself why I subtract 4 from the height - this is because you want your image to be within the border, so we need to subtract the 2px to the top + the 2px to the bottom of your border.
Note: Of course this solution would not work responsive without further scripting, but your parent <div> seems not to be responsive anyway.
Fiddle: https://jsfiddle.net/av9pk5kv/
Problems with the layout wish and the above example:
You could argue that the wished layout is not worth aspiring to in the first place, it will not work with more amount of text if you don't change something else. At some point there is so much text, so that it's just impossible to place the image filling the parent:
To avoid it partly you would have to remove the fixed width of the parent.
But the same (or similar) result will happen if the dynamically including of the image via JavaScript leads to more text lines as there were before (the text is squeezed).
How would I solve these problems: I'd use another layout.
I am vertically and horizontally center a div with the following markup/css:
.wrapper {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="wrapper">
<div class="content">
centered content
</div>
</div>
My content looks fine when the browser is wide enough. However, I would like to somehow define a smaller width the content should stay within when resizing the width of the browser. I have text I don't want running into the right and left edge of the browser when it gets small enough, so I'd like to wrap it onto more lines. What is the best way to handle this responsively?
Try giving your wrapper a width and set margin to auto
MDN Link
.wrapper{ width:50%; margin:0 auto; }
I have a div that contains a float left image and then text. It does the following.
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<img class="image" src="http://www.w3schools.com/images/colorpicker.png">
<div class="test">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Note, how it creates the outer div size based on the text alone and then it inserts the floating image, causing the text to wrap. I want the outer div width to be the width of the floated image + the width of the text, and then only line-break when it reaches the max-width of 95%.
EDIT: I also don't want ALL of the text to go below the image once the first line reaches the edge of the page. However, when there is a lot of text, I do want it to wrap under the image.
You can use flexbox to achieve that, see the example below:
jsFiddle
.outer-div {
display: inline-flex;
align-items: flex-start;
max-width: 95%;
background-color: yellow;
}
<div class="outer-div">
<img class="image" src="http://www.w3schools.com/images/colorpicker.png">
<div class="test">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Using "inline-block" on the test DIV should set it to align next to the other block. Add the following to your CSS section and you should be good.
.test {
display: inline-block;
}
Then you can add the following if you wanted it to be centered at the top rather than the bottom:
vertical-align: top;
Hopefully this helps you out! Best of luck!
A friend of mine was messing around and found the answer. The answer is to float the image inside the test div with the text. No changes need to be made to the CSS.
Example below:
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Here is an example with a lot of text to verify that it wraps under the image.
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.</div>
</div>
Thanks to everyone who provided answers. Your answers will definitely help me with things in the future, so upvotes to you all. :)
Try adding this to your code
width: fit-content;
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.