I have a text around an image - bootply.
When img-thumbnail style is applied to image, text is displayed to right but, when img-rounded or no style is applied, text is displayed at bottom.
Help to display text to right when img-rounded or no style is applied, keeping img-responsive style. As suggested on Mozilla Developer Network, I tried with vertical-align, but it's not working.
Please help with code, for clarity. Thanks much in advance!
i hope this solution will help ( maybe not the perfect one ) but i think it will work for you,
to display text to right when img-rounded simply override this class attributes by making the value for display to inline-block instead of block.
code:
Change display: block; to display: inline-block; in the class img-rounded.
then you can wrap this section ( image + paragraph ) with a div for customizing the appearance of both.
Related
Im learning html and css for now. Anyway, I am following a course, and have a queston.
This is my example code with logo of BBC and text next to it: http://i.imgur.com/kii6UPi.png
And once I add float: left; to logo, text moves up: http://i.imgur.com/SIDrCVx.png
Can anyone explain to me why this happens?
This is because by default your browser is rendering the image and the text as inline elements, therefore the baseline, or bottom of the image and text is lining up.
When you apply float:left to the image, it forces the image to display as a block rather than inline, so the text no long aligns baselines with it.
you can control them using different divs. <div class="wrapper"> <div>logo</div> <div>text</div> <div> you can control them separate, but try using float:left on the text as well, that might help.
Put simply, an img in html by default will take up the entire line that it's height occupies.
When you give an element the property of 'float', you tell it to become part of the regular flow of the page, and other elements can now wrap around it.
You may want to read up on both the float property and the inline-block
I built a small mobile website with AngularJS & Bootstrap. Please see http://www.quaaoutlodge.com/mobile/
Now I would like to move the text into the center of the <li list items but when I add a padding-bottom or margin-bottom to the #desc element, the text doesn't move up at all but the reserved space seems to just go across the <li border. Why is this? How do I change this so that I achieve above described effect?
Thank you!
edit 1
I changed the <span style from id to class, added display: inline-block; and padding-bottom: 10px;and the padding gets applied right now but, how do I move the text up while the icon on the left stays so that they get aligned centred to each other?
First, you need to fix the problem of having non-unique id elements on the page! You should probably be using a class for #desc, instead of an id.
In regards to the padding on the #desc span, you need to set the display style to inline-block, and then you should be able to use padding to affect the space around it.
I want to use a background image to highlight text in a paragraph. I do not want to use the background-color property for this as I want an image that look more like it was hand highlighted. How can I do this INLINE? I seem to only be able to do it as a block element and then the text breaks to its own line. I need it inline, a sentence here or there within a paragraph.
Example of it working but only as a block level element:
link text
Please scroll down a bit to the YELLOW highlighted text. I need the highlighting to NOT cause the text to break onto the next line AND to end when the associated span ends, which could be right in the middle of a paragraph.
THANK YOU! I read all over the place and could not see a solution.
Change display: block to display: inline on .highlite1.
What browser are you using? Works fine in Firefox 3.6.10 with display: inline.
Setting the span to display:inline seems to work in Chrome and FF. Not tried it in others though.
OK, DUE TO BEING NEW I WASNT ALLOWED TO POST IMAGES, SO I HAVE ATTACHED LINKS INSTEAD. (images should be inline with this question)
Im writing a webpage and have a div containing some text (inline) an then an image.
Now when one clicks on the image, a hidden div appears below with an input field.
The input field in this div is automatically aligned to the left edge of the div.
I want it aligned to the right of the div.
As pictures speak louder than words, see link below.
http://www.freeimagehosting.net/uploads/d827ecc330.png
Anyhow the closest I got to a solution was to apply direction: rtl to hidden div, but then my text in my input field also changes to rtl.
I just want the placing of the text field to be rtl, not the input.
I hope this isnt too confusing.
Im quite new to css but have searched arund a lot, and have yet to find a solution besides the depreciated align=right.
Any suggestions greatly appreciated.
<div id="container" style="width:500px;">
<div id="text" style="width:250px; float:left;">Text</div>
<div id="image" style="width:250px; float:left;">Image</div>
<div id="input" style="width:500px; float:left; text-align:right">Input</div>
</div>
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/