Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 days ago.
Improve this question
I have an image prepended to a paragraph element (see photo below)
The CSS float property for the image is set to right.
The paragraphs and image are part of a div with bootstrap class "container" so the basic layout is just
<div class="container">
<img class="img-fluid">
<p>Text</p>
<p>Text</p>
</div>
However, I really hate the big, ugly white space next to the image. How can I get the next paragraph element to fill that space?
The styling on each element is as follows
p {
text-align: justify;
text-justify: auto;
}
img {
height: auto;
}
Tried CSS clear:both on divs that wrap the image and paragraphs.
You can try the following approach to fill the white space next to the floated image:
Wrap the image and the text in a separate div container, like this:
.image-text {
display: flex;
align-items: center;
}
img {
height: auto;
flex-shrink: 0;
}
p {
text-align: justify;
text-justify: auto;
flex-grow: 1;
}
<div class="container">
<div class="image-text">
<img class="img-fluid">
<p>Text</p>
</div>
<p>Text</p>
</div>
The display: flex property makes the .image-text container a flex container. The align-items: center property aligns the child elements (the image and the text) vertically.
The flex-shrink: 0 property on the image makes sure that the image will not shrink to fit the available space. The flex-grow: 1 property on the text causes the text to take up all the available space in the container.
This way, the text will automatically fill the white space next to the image, without having to use the clear property.
Related
I have a problem. Whenever the text-wraps the h1 stays the original size making the icon float with quite some space on the right of the h1. What I would like is that the icon will always be directly next to the text even if the text wraps on a new line. Is this possible?
To show what I mean you would have to switch your browser to responsive mode and resize the screen.
.container {
display: flex;
flex-direction: row;
}
<div class="container">
<h1>This is a long text for testing!</h1>
<i class="icon">icon</i>
</div>
With flexbox, the .container does not know when the content of flex-items it holds have wrapped. See this answer for a good explanation about this.
Depending on your exact requirement, a solution here could be to do this without flex. You could just have the icon within the <h1> tag and resize it as required. See the code below. You can change the font-size of the .icon class and adjust its position vertically with some padding/margin if required.
.container {
display: flex;
flex-direction: row;
}
.icon {
font-size: 12px;
}
<div class="container">
<h1>This is a long text for testing!<i class="icon">icon</i></h1>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
I have a DIV block where there are a title and an image into the him. The image is setted by mouse click, so I don't know the size of image and DIV block. It's a structure:
.view-image .header { text-align: center; border: 1px solid black; }
.view-image .image { max-width: 100%; }
.view-image {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: fit-content;
height: fit-content;
max-width: 100%;
text-align: center;
}
<div class = "view-image">
<div class = "header">View of image</div>
<div class = "image"><img src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png" /></div>
</div>
I need that view-image block will take place in the centre of page horizontally and vertically. And, it's very important, the width of header and image blocks must be same.
Later I saw that Firefox doesn't support height: fit-content, in the IE and Edge also width: fit-content doesn't work.
How to make this? Of course, I can set a view-image sizes by JavaScript after image selecting, but if is it possible, it will be better do it without JS.
P.S. I want to write why my question isn't a duplicate in my opinion. The main complexity is the width of header block. If I use the flexbox as you suggest, the width of header will be count by width of the its inner text, and header width doesn't equal to image width. But if I use the fit-content as in my code, the header width and the image width are idential. It's very important for me, because in my site the header has a borders and background color, and if these blocks have different width, it won't be good. Maybe I wrote my question incorrect, then I'm sorry and I have edited my question. I have changed the title and added the border for header block in my code
Added: I found the solution by changing the structure to this:
<div class = "view-image">
<div class = "image">
<div class = "header">View of image</div>
<img src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png" />
</div>
</div>
I'm very sorry for incorrect question
Here is an example using flexbox:
.view-image {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<div class="view-image">
<div class="header">View of image</div>
<div class="image">
<img src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png"/>
</div>
</div>
From all my searches I seem to be using the right technique but the centering just isn't happening.
This is the code block from my .html file:
<div id="section-movement" class="section-container">
<div class="section-title">
Movement <span class="center">*click entries for more details*</span><span class="float-right">limited by movement speed</span>
</div>
</div>
This is the entries in my .css file:
.center {
text-align: center;
}
.float-right {
float: right;
}
The output should be the word 'movement' left aligned, the text 'click entries for more details', should be centered and the text 'limited by movement speed' should be right aligned. The left and right text work fine but the 'click entries for more details' text is not centering, it just immediately follows the 'movement' text.
span is an inline element by default. The way you use centering is inside a span element, which doesn't do anything since it's inline.
You can use <div>s instead of <span>s, which are block elements (default width: 100%), but I don't know if this is what you imagine - in your current code you are trying to center some words which basically are part of a text paragraph...
It seems you want to distribute three parts of a sentence left, middle and right. You can put all three parts into DIVs or SPANs (in this particular case it won't matter since they all become flex items by the flex definition of their container) and add this rule for their parent element:
.section-title {
display: flex;
justify-content: space-between;
}
Here's the complete code:
.section-title {
display: flex;
justify-content: space-between;
}
<div id="section-movement" class="section-container">
<div class="section-title">
<span>Movement</span><span>*click entries for more details*</span><span>limited by movement speed</span>
</div>
</div>
I'm pretty sure you can just use the center tag...?
So it would be:
<'center>
...Content you want centered...
<'/center>
But without the apostrophe's.
Try something like this.
I made a minor update to your HTML and put the word "Movement" in a span that I floated left. I floated the span with a class of right to the right and added text-align: center to the div with a class of section-title that centered the span with a class of center.
Note that you don't need a text-align: center rule on the div with a class of center.
.section-title {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
https://jsfiddle.net/eulloa/k7LL0byt/1/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a product description with bootstrap. Now I want that the is aligned with the image. Float left doesnt work. My image is to big so i want that is vertical aligned. here you can find a pen:
`https://codepen.io/anon/pen/WpVydZ`
You should put the ul & img in a wrapper div then add display: inline-block + vertical-align: middle to each.
And put the image before the ul
Example on "Wickelkommode" :
http://codepen.io/cyril-lamotte/pen/evqKxx
You could try this:
<div class="col-lg-6 sm-12">
<div class="row">
<div class="img-bett col-sm-6">
<img alt="" src="https://www.mixibaby.de/item/images/1003028/300x300/1003028-felix-grau-bett.jpg" style="width: 300px; height: 300px;">
</div>
<div class="bett-div col-sm-6">
<h3>Bett</h3>
<ul class="bett">
<li>3-fach höhenverstellbarer Lattenrost (von 21cm auf 36cm und 52cm)</li>
<li>Liegefläche: 70cm x 140cm)</li>
<li>Gesamtmaße L/B/H: ca. 145cm x 77cm x 85cm</li>
<li>3Bodenfreiheit: ca. 8,5cm</li>
</ul>
</div>
</div>
</div>
You are going to create two divs in the same row, the first stores the image and the second one the unordered list.
And in the css:
.row {
display:flex;
}
.img-bett, .bett-div {
flex: 1;
}
ul.bett {
position: absolute;
top: 25%;
bottom: 25%;
display: block;
height: 50%;
}
The display flex allow you to change the height of the two child divs
flex:1 make that both divs share the biggest height.
Also the position, and height of the ul makes room for him in the middle of the parent 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;