Following is the code I'm using in my html with twitter-bootstrap. I am trying to center align the output but the image is left-aligned no matter what I do.
<ul class="thumbnails">
<li class="span5">
<img src="img.jpg" />
</li>
</ul>
Any simple solution?
Twitter bootstrap thumbnails are floated to the left by default, you have to overwrite that behavior on your own stylesheet in order to make them center align its container with the text-align:center and display:inline-block properties. Try this:
CSS
.thumbnails {
text-align:center;
}
.thumbnails > li {
display: inline-block;
*display:inline; /* ie7 fix */
float: none; /* this is the part that makes it work */
}
This way the thumbail images will center inside the .thumbnails container. Replace the .thumbnail class with the container you want to center your images in.
If you use text-align: center; and give your img display: inline-block; it should become center aligned.
See: http://jsfiddle.net/HWMZg/
This is simple just add:
<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div>
Hope this was helpful
I found this works easiest for Bootstrap:
.thumbnails > li {
float: right;
margin-bottom: 18px;
margin-left: 20px;
}
I simply changed "float" from "left" to "right"
Create a new row for the image. Use the appropriate offset depending on the size of your image e.g.:
<div class="span8 offset2" >
Related
I'm creating a userstyle for a website, so I can't change any HTML, just pure CSS.
<div class="container"></div>
<divs>
<h2s>
<uls>
<forms>
<h3></h3>
<p></p>
</div>
I want to make h3 and p be next to each other and in the horizontal center of the container. So, I gave both of them display:inline-block and text-align:center. That made them be next to each, but not horizonatly centered. text-align:center only works if it is applied to the container, but that would be centering all the text of the other elements of the entire site.
I'm relatively new to CSS and I've searched for a way to do this, but with no avail.
If you are okay with adding a new div you can try,
HTML
<div class = "container">
<div class = "side_center">
<h3>h3 element</h3>
<p> p element </p>
</div>
</div>
CSS
h3, p {
display: inline-block;
}
.side_center {
margin: 0px auto;
display: table;
}
However I reccomend that you style commonly used elements by adding a separate class or ID as not doing so may affect other h3 and p tags in your page. Here is the bin.
NEW EDIT
h3 {
text-align: center;
margin-left: -253px;
}
p {
margin-top: -22px;
margin-right: -189px;
text-align: center;
}
PS : this is in relation to your link only.
Try posting your code into a jsfiddle.
As far as i can understand, maybe only adding a margin on the h3 and p tags will be enough?
margin:0 auto;
If you use display:inline-block; you don't have to use any float attribute.
I'm guessing you mean that the text-align:center; made them centered horizontally. If you want them to be centered vertically you could use vertical-align:middle;
I have 5 images that I want to put next to each other, these images is going to become a slider that's going to slide left or right. No matter what I try nothing seems to make it go next to each other. I have tried float:left, position:absolute, display: inline.
here is my html
<div class="slider-wrapper">
<div class="slider">
<div class="portfolio-overlay">
<div id="portfolio_0" class="portfolio-active portfolio-single"><img src="images/image1.jpg"></div>
<div id="portfolio_1" class="portfolio-inactive portfolio-single"><img src="images/image2.jpg"></div>
<div id="portfolio_2" class="portfolio-inactive portfolio-single"><img src="images/image3.jpg"></div>
<div id="portfolio_3" class="portfolio-inactive portfolio-single"><img src="images/image4.jpg"></div>
<div id="portfolio_4" class="portfolio-inactive portfolio-single"><img src="images/image5.jpg"></div>
<div id="portfolio_5" class="portfolio-inactive portfolio-single"><img src="images/image6.jpg"></div>
</div>
</div>
and this is my css
.slider-wrapper {
padding: 25px 0 0;
}
.portfolio-single {
float: left;
width: 70%;
}
DEMO WITH ANIMATION
DEMO
.slider-wrapper {
overflow:hidden; /* to remove page scrollbars */
padding: 25px 0 0;
white-space:nowrap;
font-size:0; /* to remove ~4px whitespace */
}
.portfolio-single {
/*reset fontsize if needed*/
display:inline-block;
width:70%;
}
.portfolio-single img{
vertical-align:top;
width:100%;
}
Without using align-left we can use on a parent element white-space as nowrap, this will make sure to prevent wrap on inner inline or inline-block elements.
As said above we than need to respectively set the slides to inline-block.
using inline-block on elements they'll be in an inline flow, which means that if in your HTML you have every slide in a new line, a 4px (it's a whitespace!) gap will appear next to each slide.
to remove it use on the parent element font-size:0;
If you plan to have text inside your slides than you'll need to set font-size:16px back to your children slides.
vertical-align:top or any other align value makes sure to place your images at the right vertical place inside their parent containers.
It's because you gave each image a width of 70%. So each image was taking up a new line.
If you have 5 images, then the max width to have them all on the same line would be 20%. But with any padding/border/margin will add to that, so you might need to put under 20%.
http://jsfiddle.net/rNa9v/1/
.portfolio-single {
float: left;
width: 10%; /* changed to 10% instead of 70% */
}
Your img are in divs so they each take the full width of the page.
You can change this behavior by making the divs "inline":
.portfolio-single {display: inline-block;}
http://jsfiddle.net/9377D/2/
.portfolio-single {
float: left;
width: 16%; /* 100/6 */
}
You can calculate it ;-)
Here you can change the div option.It could solve the problem.
for further assistance follow the link.. : http://www.w3schools.com/css/css_align.asp
Been trying to work this out for a few hours now to no avail....I really want a bullet list that will work responsively (al browser width) that looks like this...
Basically the whole thing needs to center, you can center text but not the span with the bullet image :-(
I would obviously 'like' to use a UL/LI. But even without doing it I just cannout fathom how to do it. I haven't even addressed the novices/entrepreneurs bit at the end, assume I can overlay an image? Anyway any advice appreciated. I really need it to scale down for a responsive design too if possible...
EDIT :
I have tried I tried floating, in-lining, offsetting, using a grid system, nothing.... :-(
EDIT 2:
At the request of nathan I will post one of my solutions...
<div class="section group">
<div class="col span_1_of_2">
<p style="float:right;" class="darkGrey">
<span class="sprite step2"></span>
</p>
</div>
<div class="col span_1_of_2">
<h3 class="darkGrey">We then seek to place the you in our network of organizations who actively recruit developers.</h3>
</div>
</div>
^ the above just shoves my tick all the way to the right.....
EDIT 3
I just tried this using an image http://jsfiddle.net/fSSeK/ and it worked however my bullet point is a sprite background image and it doesnt work!
The exact technique is dependent on exactly what kind of bullet you want to show, but for classic bullets here is an easy way to do it.
You need to remove the bullet from the browser's built-in styles with list-style-type: none, then center the text in the list elements horizontally and use the :before pseudo-element to insert a bullet before their content. This bullet will be centered.
Sample CSS:
ul {
list-style-type: none;
}
li {
text-align: center;
}
li:before {
content: "• "
}
See it in action.
Use pseudo-element with background image
For a typical list:
<ul>
<li>The first line</li>
<li>The Second line which is longer</li>
</ul>
and use the following CSS:
ul {
text-align: center;
}
ul li {
border: 1px dotted blue;
display: block;
position: relative;
}
ul li:before {
content: "";
background: url(http://placehold.it/20x20) left top no-repeat;
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
See fiddle demo: http://jsfiddle.net/audetwebdesign/S2Mvn/
You can use absolute or relative positioning on the li:before element if you need more precise alignment.
So I have a simple list thats set out like below
<ul class='my-videos'>
<li>
<a class='show-more' href='' title=''>Show More</a>
</li>
<ul>
I am trying to get the .show-more to be center aligned. I have got this far
ul.my-videos li .show-more
{
display:inline-block;
margin:0 auto;
}
Now this doesn't work. I have setup a JSFiddle here http://jsfiddle.net/6HHKf/
Any ideas on this?
PS I want to keep the anchor as inline or inline-block so that the width isn't 100%
UPDATE
There are other elements in the li, so text-align is out of the answer
ul.my-videos li .show-more {
margin:0 auto;
border:#aaa 1px solid;
width: 100px;
display: block;
}
if you want center an element width margin: 0 auto you need to set the width
and also, you need display:block
check jsfiddle here: http://jsfiddle.net/6HHKf/5/
Simply set the CSS for the list item to center align the text.
.my-videos li { text-align: center; }
Easy, just add text-align:center; to the li.
Edit
Since you need to cope with other mystery elements in the li this may work http://jsfiddle.net/6HHKf/6/
If it's an option to use an extra span within the a element, you could use relative positioning with left +/- 50%
http://jsfiddle.net/ptriek/6HHKf/8/
I have this layout:
<ul style="white-space:nowrap;">
<li style="width:200px; display:inline-block;"></li>
<li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>
I have managed to stop the ul from wrapping which is a start. However, the content in the 2nd li continues off screen. Overlapping its parent elements etc.
I need the 2nd li to take up the slack and be dynamic in width unlike the first li. And I need the text to wrap inside the 2nd li.
li {display:table;}
is your friend. Also, don't forget to remove inline-styles!
Try white-space: normal on the li elements.
white-space is inherited by default so they received nowrap from the ul.
I'm starting to think that you are using an ul for layout purposes which div might be better suited for:
<div class="Item">
<div class="ImageContainer"><img src="" alt="/></div>
<div class="TextContainer">Text text text text text</div>
</div>
.Item {
width: 200px;
overflow: auto;
}
.ImageContainer {
float: left;
width: 40%;
}
.TextContainer {
float: left;
width: 60%;
}
Sounds like you might actually want to use a table.
Otherwise, if you know the width of the image, float it left and give the next element a left margin greater than or equal to the width of the image.
For example:
article > img {
float: left;
height: 80px;
width: 80px;
}
article > div {
margin-left: 90px;
}
<article>
<img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b">
<div>
<h4>Matt Di Pasquale</h3>
<p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.</p>
</div>
</article>
This is a practical use case for CSS Grid Layout:
ul {
display: grid;
grid-template-columns: 200px 1fr;
column-gap: 10px;
}
li {
display: unset; /* reset user agent list-style */
}
img {
background: #00bcd4; /* style image background */
}
<ul>
<li><img width="200" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20/%3E%0A">
<li>long text content next to the image long text content next to the image long text content next to the image long text content next to the image
</ul>
Creates two-column grid with 10px column gap. First grid item has 200px width to match your image and the second wrapping text.
If if content you're trying to wrap may contain long strings such as an absolute URL or scientific/medical terms like pneumonoultramicroscopicsilicovolcanoconiosis add overflow-wrap to the second li using the :last-of-type pseudo-class.