Is there any way to align the images vertically in LIST ITEM using CSS only?
The I have a slider (slowed down) that needed to be aligned vertically in a 500px-height LI
The site is in http://210.48.94.218/~printabl/design/portfolio/.
Your help is greatly appreciated.
Assuming your list items have a fixed height, you can use line-height combined with vertical-align: middle to do this.
Example:
ul li {
display: block;
height: 500px;
line-height: 500px;
}
ul li img {
vertical-align: middle;
}
Working example here.
This is a use case for Flexbox:
ul {
display: flex;
align-items: center;
}
(use vendor prefixes where necessary depending on your browser; see http://caniuse.com/#feat=flexbox)
And then remove height: 500px from .soliloquy-item.
Related
I'm having difficulty centering my navbar. I've tried replacing "block" with "inline-block" in certain areas that didn't lead to any success. I've also tried "text-align: center" as well but that's not working.
I tried "text-align: " left, right and center but it doesn't change at all anyway. Am I looking in the right spot?
Everything else is functioning as intended so I'm scared to touch anything.
Here's the jsfiddle.
#navbar ul li a, .dropdown-toggle {
color: white;
text-align: center; /*doesn't seem to do anything*/
padding: 14px 16px;
text-decoration: none;
display: inline-block;
}
The trick to centering elements with text-align: center is two-fold:
1. Declare display: block and text-align: center on the containing parent element
2. Declare display: inline-block on the nested children elements
You can center any inline-block element this way using text-align: center if the parent element is a block element.
What you will need to adjust your styles accordingly:
#navbar ul:not(.dropdown-menu) {
float: none;
display: block;
text-align: center;
}
#navbar ul:not(.dropdown-menu) > li {
display: inline-block;
float: none;
}
An important factor to consider anytime you need to align an element is to keep a look out for float rules, they will negate any attempt at aligning elements using display rules.
Fiddle Demonstration:
https://jsfiddle.net/kbuoL6sm/6/
Try margin: 0 auto; on the #navbar
Or, on the parent of the #navbar try text-align: center;
If it needs something more than that, css-tricks has a great guide here for centering just about every condition:
https://css-tricks.com/centering-css-complete-guide/
I have an inline-block menu (made with bootstrap 3) and I want to know if it's possible to center align any content that wraps?
Here's a codepen highlighting the issue
http://codepen.io/Kathrynwatts/pen/VebjzW
As you can see, when you downsize the screen, all the list items align to the left (which is default wrapping behavior). I'd like them to wrap to the center, if I can.
CSS
.plays-nav { //parent container
font-weight: 400;
letter-spacing: 3px;
}
.plays-nav>li { //menu list items
text-align: center;
}
.navbar-centered .navbar-nav { //parent container
float: none;
text-align: center;
}
.navbar-centered .navbar-nav > li { //menu list items
float: none;
}
.navbar-centered .nav > li { //menu list items
display: inline-block;
text-align: center;
margin: 0 auto;
}
If you text-align:center the parent, display:inline-block children will stack in the middle and wrap. Subsequent rows will also be center aligned. So this will do it:
.plays-nav {
text-align: center;
}
Note: When using this solution make sure the left and right paddings on the parent are equal and no floats are set on children.
change the code comment //parent container to /* parent container */.
Your code is correct, but the comment format is wrong, CSS comments must be the formatted as /* comment content*/, otherwise the code after your comment might be affected.
I cant seem to get the BOOKS to vertically align in the middle when I added vertical-align: middle; but I must be missing something? Can someone please help me out.
http://jsfiddle.net/wz9xzu2v/1/
You need to set vertival-align:middle to img tag.
#menu ul > li img {
display: inline;
border: 1px;
margin: auto;
vertical-align: middle; // <- added this
}
http://jsfiddle.net/wz9xzu2v/5/
Or you can also provide line-height of equal height of that image height to that specific . it will put your text in center vertically.
li.img-text {line-height:35px;}
I have my sidebar code:
http://jsfiddle.net/48Wse/
My li's are currently displayed as tables. Now, I would like to center content inside li so that left and right paddings would always be the same. Text-align: center does most of the job but it's not correct.
Image what I want:
As your clocks seems to not have a fluid width, you could use :
li {
display: block; /* not necessary, just remove table */
...
.data {
display: block; /* not necessary, just remove inline-block/table-cell */
margin: 0 auto;
width: 200px;
...
}
}
This will center your clocks, and keep the label left-aligned :
Updated Fiddle
your .data has text-align: left .. should be center.
text-align: center;
http://jsfiddle.net/48Wse/2/
Put
li * {
text-align:center;
}
in your css.
DEMO
Set text-align:center; on the li
Set display:inline-block; on the .data div
Set text-align:left on the .title
UPDATED FIDDLE
PS: There's no need to set a width on the data div
I have a div that contains two ul. I'd like to position the first ul on he right and the second ul on the center.
I cannot use absolute positioning since it makes me other problems in nested elements and in mobile view.
This is what I've done:
<div class="w">
<ul class="right"><li>a very very very long text</li></ul>
<ul class="center"><li>center</li></ul>
</div>
.w {
text-align: center;
display: inline-block;
width: 100%;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
}
li {
float: left;
}
.right {
float: right;
}
.center {
display: inline-block;
}
you can see jsfiddle here: http://jsfiddle.net/mF7XR/
The problem is that the centered ul is aligned to the middle between the left and the start of the right ul (see the example). Therefore it is not correctly centered. How can I center correct the second ul?
I am not sure whether you are good to go with javascript. Anyway, I did some work on it. Please have a look.
javascript
//Added Id to ul.center as "center"
function resize(){
var width = document.body.offsetWidth;
var center = document.getElementById('center');
center.style.marginLeft = (width/2) - (center.offsetWidth/2);
}
//Call the above function on "resize" and "load" events.
CSS
.center {
display: inline-block;
float:left;
}
Working Bin
Define the Width of centered elements then only you could get what you want. You could also define the margin as follows...
margin: 0 {number greater than right floated element}px 0 {number greater than left floated element here you have only two elements so place here 0}px;
How about position:relative? Then you can position it anywhere without it causing problems in nested elements and mobile view.
http://jsfiddle.net/mF7XR/4/
This solution uses no absolute positioning. Tested on Win/Chrome.
Change the .center to
.center {
display: inline-block;
position: relative;
width: 100%;
top: -20px; /* move up */
}
and add this rule
.center li {
float: none;
}
jsfiddle
Update
If your content is not known, then you need JS (or jQuery) to set the offset relative position.
Initially I thought about using a different markup, but your restriction on absolute positioning pretty much kills this idea.
jsfiddle
It would be interesting to know why you cannot use absolute position. Maybe the root of your problem lies there.