I am wanting to make my website have a similar layout to this one here: http://www.mathewporter.co.uk/ but none of my div's are lining up the right way. I have tried using but that didnt work out right. As you can see on the JSFiddle here: http://jsfiddle.net/vf4Wu/1/ using the css:
div.sidebar{
margin-top: 25px;
margin-left: 150px;
display: inline;
}
div.content{
display: inline;
}
div.content h2{
display: inline;
}
Thanks, Im not sure if im asking this right or not. But what should I be using if not divs?
Use:
display: inline-block;
Inline items cannot accept top/bottom margin and padding.
Use float for each contanier or display: inline-block
Related
I know how to align text vertically inside a div, but I am unsure on how to do it if the div has a percentage height and width. Here is my code:
<div id="header">
<h1>Home</h1>
</div>
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
Now on my webpage the text in the div has been aligned correctly horizontally but not vertically. How do I fix this problem? Can you also try to explain your answers and keep them as simple as possible please (I'm still relatively new at HTML/CSS). Thank you.
You can use the flexbox model to easily center things.
Just add the following rules to your container:
display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering
FIDDLE
Note this is probably a more general solution than what you expected, but what's really cool about flexbox is that it works in many different cases, including yours (example with an h1 tag here).
Try giving display:inline-block to your h1 tag.
DEMO
You can just add:
display:inline-block
to your h1
example: http://jsfiddle.net/24pwprvf/
Add line-height matching the height of the container:
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
line-height: 0.15em;
}
You should not use line-height for the effect you desire as suggested by Praveen Above.
You can get the same affect by either putting, 'display: inline-block' in either the #header div or in the #header h1 css style.
the first part is not advisable.Best practice will be to use it in the h1 style only.
Could you help me align vertically (on blue background) text and icons (fb, etc) ?
I tried to use vertical-align, display:table, etc. But it didn't solve my problem.
http://tinyurl.com/pe4avff
Please help me. Thanks!
You probably didn't use display and vertical-align properties in the right way.
Use the following styles:
.align {
display: table;
height: 100%;
...
}
.vertical {
display: table-cell;
vertical-align: middle;
}
Also notice that this is a common practice for vertical alignment, but not the only one.
You could also do:
.vertical {
display: table-row;
line-height: 2em;
}
Which is basically setting line-height of the text in your div to the same value as your divs height.
Remove float: left from CSS classes bar-menu-left, bar-menu-right and bar-icons.
If what you want to do is to vertically align all text and icons you should remove
float:left; from the .bar-menu-left, .bar-menu-right and .bar-icons classes.
I'm trying to vertically center single and multi-worded links in a horizontal nav. The multi-worded links work fine but as you can see the single worded links float to the left. I tried adding a width to ul li a and ul li.colour but that changes the width of the div itself.
http://codepen.io/Compton/pen/ufGCI
You can try this, it's a bit hackish but it works:
ul li span {
display: inline-block;
vertical-align: middle;
height: 110px;
font-size:2em;
text-align: center;
padding: 0 20px;
line-height: 110px;
}
.doubleLine {
display: table-cell;
line-height: 1em;
}
The line-height on the span centers it vertically; you add the doubleLine class to spans with more than one line to revert them and keep them working like they were.
I'd like to see a neater solution than this, but again it works for now. You may have trouble down the line as the double line spans are only happening to look like they work, they won't always work for every combination of words. You can test this by changing one of the words to two characters, you'll see it doesn't actually center it.
Firstly my CSS skills are... a work in progress. But I have got so far in as to successfully have a bunch of list items arranged in a grid. http://jsfiddle.net/ashanova/Y4SR3/2/
What I'd like to do now is centre the list items. I have tried to replace float with inline but it causes the width and height of each item to collapse. I would also like to centre the text horizontally and vertically within each list item as well, ideally ellipsisizing (not a word) overflow text. As one last specification I would like to only modify CSS to the ul and its children if thats possible.
While the language gets a little unclear when you're dealing with multiple parent and child elements, and centering (/middling) on 2 axes, I think that if the other answers aren't what you're looking for, you might actually want display: table-cell.
Check this fiddle.
If you give your li elements display: table-cell, text-align: center and vertical-align: middle, I think the text will arrange itself appropriately. Unfortunately, table-cell elements don't accept margin, so I added a 10px border instead.
In order to accomplish truncation of text that overflows and the insertion of an ellipse, you'll need to use some kind of javascript.
UPDATE
Having learned more about what you're after through the many other answers and comments, I've come up with a better solution here: http://jsfiddle.net/crowjonah/jx8sD/
What you need to do is insert <a class="list-item"> tags inside the li elements, and use this CSS:
.tile li {
background-color: white;
display: block;
float: left;
margin: 10px;
overflow: hidden;
}
.tile li a.list-item{
display: table-cell;
vertical-align: middle;
height: 75px;
text-align: center;
width:75px;
}
Text-align: center will align your list items to the center. Vertical-align: text-top will align items to the center vertically.
vetical-align will not actually do the job in this case. I wish it were that simple.
This aricle will give you some insight into the problem and will help you solve it:
Understanding vertical-align, or "How (Not) To Vertically Center Content"
This will do what you want. Borders on inline-block items are a pain, so I'm using a border to make it look right.
.tile li {
background-color: white;
display:inline-block;
border: 10px solid red;
width: 75px;
height: 75px;
text-align:center;
display:table-cell;
vertical-align:middle;
overflow: hidden;
}
this is the layout I'm working with. what I'm trying to achieve is that as the window is collapsed I want the div on the right to collapse allowing the inner elements to be pushed down.
my css is as follows:
#left-div {
display: block;
float: left;
}
#right-div {
display: block;
float: left;
}
#right-div elements {
display: inline-block;
}
I basically want to achieve what's going on in the last photo without the right div getting moved down first. any ideas?
Edited to remove pictures as I've come to an answer and I'm not sure if I was supposed to post them.
After taking various stabs at it, appears that JavaScript/jQuery may be your only solution...