This seems to be a common problem in the Bootstrap community, the process of centering and class with an odd number for the span width, class="span3" for example. I have a .row with three .span3 classes inside it. I realize it would be easier to just use three span4 classes, but I'm not a fan of how large it makes my elements.
I've tried a few things so far:
I've created a custom 15-column grid so I could give a .span3 class before and after the three elements I actually want to use, however when responsive-bootstrap.css kicks in, things act strange because the responsive file deals with a 12-column grid.
I've tried placing everything in a custom .center class which uses the following CSS:
.center {
float: none;
margin: 0 auto;
text-align: center;
}
For what it's worth, everything works when my browser width is between ~980px - ~1199px.
There has to be a simple way to fix this problem, right? I'm not worried about it looking good on older browsers either, this is a personal site. Here is where I'm currently at, working with a 15-column grid:
Here is my JSFiddle
The HTML:
<div class="row">
<div class="center">
<ul class="thumbnails" id="portfolio-links">
<li class="span3"></li>
<li class="span3" id="item1">
</li>
<li class="span3" id="item2">
</li>
<li class="span3" id="item3">
</li>
<li class="span3"></li>
</ul><!--/.thumbnails-->
</div><!--/.center-->
</div><!--/.row-->
The CSS:
#portfolio-links {
display: block;
margin: 0 auto;
float: none;
}
.center {
float: none;
margin: 0 auto;
text-align: center;
}
You just have to make the <div class="center"> with a size of span9 and remove the extra li.
The final result will be: http://jsfiddle.net/AKWqP/
Related
I have two elements (a paragraph and a img) inside a link element and i want the paragraph to be the same width as the img, i tried doing display: inline-block; and a couple other things but cant seem to get it to work. can anyone help?
<li>
<a href="https://store.steampowered.com/app/4000/Garrys_Mod/" target="_blank" >
<img src="/Photos/garrysmod.jpg">
<p>Garrys Mod is a physics sandbox game in which you can do allmost anything you want, including playing hide and seek, fighting monster, fighting eachother, escape from jail, and much more</p>
</a>
</li>
Edited/changed after comment (the question wasn't clear about this):
Apply display: flex and flex-direction: column; to the link, plus an optional width setting to the parent container (ul), and (also optionally) text-align: justify to the p tag to make the text align also to the right border:
ul {
list-style-type: none;
width: 400px; /* any value here, or no value to fill the horizontally available space */
}
li a {
display: flex;
flex-direction: column;
}
li a p {
text-align: justify;
}
<ul>
<li>
<a href="https://store.steampowered.com/app/4000/Garrys_Mod/" target="_blank">
<img src="/Photos/garrysmod.jpg">
<p>Garrys Mod is a physics sandbox game in which you can do allmost anything you want, including playing hide and seek, fighting monster, fighting eachother, escape from jail, and much more</p>
</a>
</li>
</ul>
I have given you an example below to learn from.
You should look into flex. It's just an easy way to control content. There is no actual purpose for it here, but I still gave the link container the flex property, because you would probably want to align the content later (e.g. align-items: center).
Read up on flexbox, good luck!
.link {
display: flex;
}
.link img {
width: 50%;
}
.link p {
width: 50%;
}
<div>
<a class="link" href="https://store.steampowered.com/app/4000/Garrys_Mod/" target="_blank" >
<img src="https://cdn.cloudflare.steamstatic.com/steam/apps/4000/ss_ff27d52a103d1685e4981673c4f700b860cb23de.600x338.jpg?t=1663621793">
<p>Garrys Mod is a physics sandbox game in which you can do allmost anything you want, including playing hide and seek, fighting monster, fighting eachother, escape from jail, and much more</p>
</a>
</div>
I am trying to create a restaurant menu. I would like each menu item to be formatted as such:
Mozzarella Sticks ($9.95)
To do this I have the following html:
<h3 class="menu-item">Mozzarella Sticks</h3><p class="price">5.95</p>
I have the item name and price in different elements because I would like to make the price smaller, change the color, etc...
My problem is getting both elements to appear next to each other since h3 and p are both block elements. Here are the solutions I have come up with. Solution one:
.menu-item{
display: inline;
}
.price{
display: inline;
}
And adding a line break at the end of each entry:
<h3 class="menu-item">Mozzarella Sticks</h3><p class="price">5.95</p>
<br />
This works however I feel this is not the proper way to do this and that it should be done with CSS.
I have also considered the following, solution two:
<h3 class="menu-item">Mozzarella Sticks <span class="price">5.95</span></h3>
This would allow me style the price separate from the menu item, but including the price in the h3 still feels like an odd way to go about this.
Lastly, I have seen that you can set a width on both elements and then apply float: left; and float: right; but this messes up the spacing, as I would like the elements to appear right next to each other.
Any suggestions? Were any of the ways I listed a good way to about this or is there a better solution?
Try this grid layout. You can customize each block to your own liking.
You can add another column by inserting 1fr
.menu{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: 'a b';
}
.menu-item{
grid-area: a;
text-align: center;
font-size: 20px;
}
.price{
grid-area: b;
text-align: center;
font-size: 18px;
}
<div class="menu">
<div class="menu-item">Mozzarella Sticks</div>
<div class="price"><i>($9.95)</i></div>
</div>
You can set widths as a percentages, let's say 80% and 20% respectively.
If you set display: inline-block you don't need to set any float. The elements keep having block properties but are kept inside the text flux like they were actual text.
Even though this works alone, i would suggest to also keep a better and cleaner semantic html division, like the ul showdev mentioned or at least a containing div for each couple.
You might consider creating an element for each item with children for the name and price.
Below, I'm using flexbox for item layout.
#menuItems {
margin: 0;
padding: 1em;
}
.menuItem {
margin: 0 0 1em;
display: flex;
}
.menuItemTitle {
flex: 0 0 150px;
margin: 0 1em 0 0;
font-size: 1em;
}
.menuItemPrice::before {
content: "$";
}
<ul id="menuItems">
<li class="menuItem">
<h3 class="menuItemTitle">Mozzarella Sticks</h3>
<span class="menuItemPrice">5.95</span>
</li>
<li class="menuItem">
<h3 class="menuItemTitle">Another Item</h3>
<span class="menuItemPrice">10.50</span>
</li>
<li class="menuItem">
<h3 class="menuItemTitle">Third Item with a Longer Name</h3>
<span class="menuItemPrice">10.50</span>
</li>
</ul>
My problem is getting both elements to appear next to each other since
h3 and p are both block elements. Here are the solutions I have come
up with. Solution one:
In general, if you want two block elements to appear next to each other without using the newer layout methods (flexbox and css grids). You can float the elements and then add a "clear fix" to those elements and here are two ways you do that.
Float the elements, Add an extra div, Add the clearfix
Float the elements, Add a CSS pseudo element "after", Add the clearfix
Method 1: Add extra div
<style type="text/css">
.clearfix{
display: block;
clear: both;
}
h3{
float:left;
}
p{
float:left;
}
</style>
<div class="my-container">
<h3>Hello</h3><p>World</p>
<div class="clearfix"></div>
</div>
Method 2: Add pseudo elem after
<style type="text/css">
.clearfix::after {
display: block;
clear: both;
}
h3{
float:left;
}
p{
float:left;
}
</style>
<div class="my-container clearfix">
<h3>Hello</h3><p>World</p>
</div>
Please note that on method 2, clearfix class was added to the container. Also, notice that a pseudo CSS element ::after was added to .clearfix.
This would allow me style the price separate from the menu item, but including the price in the h3 still feels like an odd way to go about this.
I think you are right. Building HTML should be semantic. Which basically means that your markup/code must be self-explaining or have meaning. In the context of what you are trying to achieve, h3 here (IMHO) doesn't suit what you are really trying to express or do. The reason I say that is because you are to display a list of "menu-items" and h3 by definition is a header so the element doesn't fit what it is trying to display. My recommendation is, instead of using h3, use a list instead, similar to the answer above. This would make your HTML code a lot more semantic and you can now use the other method you've mentioned without making it look weird (because span is inside of h3). It would look similar to the code below instead...
<ul id="menuItems">
<li class="menuItem">Mozzarella Sticks<span class="menuItemPrice">5.95</span</li>
</ul>
Btw, my recommendation above is just my opinion so please take it with a grain of salt. For more info about semantic HTML. You can check the links below
https://www.lifewire.com/why-use-semantic-html-3468271
https://www.w3schools.com/html/html5_semantic_elements.asp
Hope this helps! :)
How can I center-justify a list of links in CSS?
This is similar to this question: How to Center-Justify text in CSS?, except using links instead of text. The fiddle from that answer there (http://jsfiddle.net/L4pzm/) doesn't work when I use links instead of text.
This is how they did it in the above fiddle:
.center-justified {
margin: 0 auto;
text-align: justify;
width: 30em;
}
Here is the fiddle I created: http://jsfiddle.net/hsm4w0p5/
<div class="center-justified"><p>
First Second<br>
Third <a href="4">Fourth Fifth</p>
</div>
As you can see in the example above, the links aren't justified. I want to make it so that the word "Second" is aligned to the right to match with the word "Fifth".
I don't think this is possible using text-align: justify, but can use flexbox to do something similar:
Html:
<div class="center-justified">
<div class="row">
First Second
</div>
<div class="row">
Third <a href="4">Fourth Fifth
</div>
</div>
CSS:
.center-justified {
margin: 0 auto;
width: 30em;
}
.row {
display: flex;
justify-content: space-between;
}
a {
text-decoration: none;
}
http://jsfiddle.net/czcegf2d/1/
Be sure to check the browser compatibility of flexbox (which is quite good these days) and see that it fits your needs. http://caniuse.com/#feat=flexbox
If you don't need to be dynamic you could target each link with the :nth-child(n) CSS selector to float left and right inside the .center-justified container.
like:
.center-justified a:nth-child(2n) {float:right}
I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)
Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:
http://jsfiddle.net/5vxSP/1/
The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)
Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?
If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.
HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...
<div>
<span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span>
<span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>
vertical-align in CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.
Based on a proposed a solution for a similar problem here, you can do something like this.
Put the link texts inside spans.
Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.
.main-services {
overflow: auto;
padding: 17px 0 9px 0;
}
.main-services li {
list-style: none;
float: left;
border-right: 1px dashed #E53B00;
padding-right: 14px;
}
.main-services li a {
display: block;
height: 78px;
color: #ED5D04;
text-decoration: none;
}
.main-services li a img {
vertical-align: middle;
}
.main-services li a span {
display: inline-block;
vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }
<ul class="main-services border-common">
<li class="service-1">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>Some text goes here</span>
</a>
</li>
<li class="service-2">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text here</span>
</a>
</li>
<li class="service-3">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text goes here but this text overruns</span>
</a>
</li>
</ul>
Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/
Note: this won't work in IE8.
I know this question has been asked many times, but I never saw a satisfactory answer. I mean, an answer that actually works.
So, here we go again. Take this jsFiddle: http://jsfiddle.net/KFMyn/3/
If you remove the align="center" from the HTML, what CSS do you need to use to make the result look the same as the original?
The answers I found usually amount to margin:0 auto and/or text-align:center but neither of those have the desired effect of making the result look the same as the original.
The text align center covers most of the text elements but a little extra is needed to centre align the table
div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}
http://jsfiddle.net/NYuv8/4/
div {width:400px; text-align: center;}
table {display:inline-block;}
Should work as well in addition to Paul's answer.
http://jsfiddle.net/KFMyn/13/
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }
Works for me. But this may not work properly when you have multiple nested dom elements
margin: 0 auto;
text-align: center;
Above Code might not be working when you are using bootstrap grids.
Here is the quick solution for this using bootstrap 4 and IT WORKS IN EVERY BROWSERS
<div class="row">
<div class="col-sm-2">
<div class="customClass mx-auto">
<p class="text-center"> your text goes here </p>
</div>
</div>
</div
you can put any column like col-sm-2, 3, 4.......12
Replacement for Center tag in different situations
1. text-center
Works with p, a, button, h tags and more i.e all the tags containing data or text directly
2. Flex
It can used to align complete element inside another element, however it has more utilities check documentation for reference
Use can center elements using flex in following manners
display:flex;
justify-content:center;
align-items:center;
Another import property is flex-direction i.e
flex-direction:column
flex-direction:row
Use flex direction according to the type of alignment you want
3. mx-auto (bootstrap class)
You can try and style the table as well, like this:
div {
width:400px;
margin: 0 auto;
text-align: center;
}
div table {
margin: 0 auto;
}
Why not just leave it
<div align="center">
It still works just fine with all browsers as far as I know. I have plenty of old html and I got to this thread only because my NetBeans IDE is warning me this is obsolete. My guess is the browsers are automatically translating to the correct solution. Same thing with
<font size="6">bla bla</font>
still works just fine and probably automatically converted to
<span style="font-size:36px">bla bla</span>
div { width: 400px; text-align: center; }
table { display: inline-block; }
This should work. Check example here: http://jsfiddle.net/ye7ngd3q/2/
and if you want elements inside table cell left/right aligned then you can define individual classes and assign to element respectively as show below:
HTML
<div align="center">
A centered div
<p>A</p>
<table border="1">
<tr><td class="align-left">centered</td><tr>
<tr><td class="align-right">div</td><tr>
</table>
<ul><li>A centered div</li></ul>
</div>
CSS
div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }