I'm trying to have it so that when on a mobile device, the image is above the text but both are centered and have equal margins on both sides. Is something like that possible given the following code? If so, how?
<p>
<img src = "Images\Locations\paolo-warehouse-placeholder.jpg" alt = "Paolo's Hideout" style = "width: 390px; height: 240px;">
(text)
</p>
Give the paragraph element a style of text-align: center; and the image this style:
img {
margin: 0 auto;
display: block;
}
This will center the image and the paragraph text and make sure the text is below the image.
Related
I am trying to figure out how to push the iphone phone image below the text. Next, I want to add text next to the image. I have tried relative and absolute positioning but not sure what type of padding to use.
I have tried relative and absolute positioning but not sure how many pixels of padding to use.
<div class="very-bottom-half">
<img class = "second-logo" src="images/logo.png" alt="duh-a-logo">
<img class = "phone" src = "images/phone.png" alt = "phone-home">
<p>215-900-2565</p>
</div>
.phone {
position: relative;
padding-top: 20px;
I expect the phone image to go below the text and then I expect to have text written next to the image.
You can use display: flex; to get the elements side by side in one.
.very-bottom-half {
display: flex;
align-items: center;
}
img {
max-width: 100px;
margin-right: 1em;
}
<div class="very-bottom-half">
<img class="second-logo" src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper-big.jpg" alt="duh-a-logo">
<img class="phone" src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper-big.jpg" alt="phone-home">
<p>215-900-2565</p>
</div>
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 feel like this should be really easy, but I've been playing with it for ages and haven't gotten anywhere.
I have a div, and my images inside it are set to width:100%. This works as you'd expect, with the images appearing edge to edge inside the div.
For paragraphs inside this div, I have padding.
What I'd like, is for images inside those paragraphs to also appear at the full width of the div (not the paragraph, which is narrower, due to the padding). However I do need to keep the padding, as I need it or the text.
HTML (Which can't be changed):
<div id="grandparent">
<img src="whatever" />
<!-- this next image should be exactly the same width as the first one -->
<p><img src ="whatever" /> This text still needs to be padded though.</p>
</div>
CSS:
p {
padding:15px;
}
img {
width:100%;
}
I have tried adding a negative margin to the image (using the CSS below), which gets it over to the edge, but I can't accurately make it the same width as the div.
CSS:
p img {
/*starts the img in the right place, but doesn't fix the width */
margin-left:-15px;
margin-right:-15px;
}
One thing you can do is use the css calc property. Try the code below. Keep in mind that calc does not work in some older browsers.
Fiddle: http://jsfiddle.net/q8Lb7t3t/6/
html
<div class='gp'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
<p>
<img class='img-pad' src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
text text text text text text text text text text
text text text text text text text text text text
text text text textext text text text text text text
</p>
</div>
css
.gp {
width: 300px;
background-color: #eee;
}
img {
display: inline-block;
width: 100%;
height: auto;
}
.img-pad {
margin-left: -20px;
width: calc(100% + 40px);
}
p {
padding: 20px;
}
I am having problem with placing text below background image, I did play with CSS but no luck text is not moving to next line below image.
Here is my HTML
<a class="bgimg">placing text below background image </a>
.bgimg{
background-image: url('images/HBR_compact_black_text_red_shield65x31.png');
background-repeat:no-repeat;
}
I wanted to have background image at top and text below the image.
can anybody suggest me please ?
The key is in top padding, so you need:
padding-top: 20px;
Also, since it's an anchor which is inline by default, you need to set it to inline-block (setting it to block might cause text flow issues):
display: inline-block;
And that's it, see an example here: http://jsfiddle.net/2Log20b4/
At that point, why not Just separate your elements a bit?
<div class="bgimg"></div>
<p>placing text below background image </p>
<style>
.bgimg{
background-image: url('images/HBR_compact_black_text_red_shield65x31.png');
background-repeat:no-repeat;
width: 65px;
height: 31px;
}
</style>
the alternative would be to use text-align on your anchor (but you'd have to set the anchor to display as a block element first)
If the height of the image is unknown, you could use CSS generated content with a url() value as follows:
.bgimg:before {
content: url('http://placehold.it/100');
display: block;
}
.bgimg {
text-align: center; /* align the image to center */
display: inline-block;
}
<a href="#" class="bgimg">
placing text below background image
</a>
It's worth noting that generated content is supported in IE8 and newer.
Please modify this example so as to show me how I can have the text beside the image vertivally aligned beside the middle of the image.
Demo: http://jsfiddle.net/Blender/sVx5e/1/
HTML:
<div onclick="window.location = '#'">
<img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb1.png">
jsFiddle
</div>
CSS:
div {
height: 150px; /* This is the height of the image */
line-height: 150px;
}
img {
float: left;
}
Use a <div>, not a <a> element, when wrapping blocks of elements. IE chokes up when you do...