I've been attempting to vertically align the text in my lists, but so far I haven't had any luck.
li{
height: 100px;
display: inline-block;
vertical-align: middle;
border: 1px solid red;
}
I've been attempting to vertically align the text in my lists, but so far I haven't had any luck.
li{
height: 100px;
display: inline-block;
vertical-align: middle;
border: 1px solid red;
}
If you don't want to modify your HTML, consider using display:flex; for newer browsers: SEE DEMO
ul{
width: 50%;
}
li{
height: 100px;
display:block;/* or use as a backup to remove bullets */
display: flex;
justify-content:center;
align-items:center;
border: 1px solid red;
}
If the browser doesn't support display:flex;, the content will be displayed on top.
To wrap text with an additional container inside li, you can utilize display:table/table-cell: TRY DEMO or explore other methods using pseudo-elements and vertical-align+inline-block; : VIEW DEMO
Here is an alternative solution to consider. Instead of specifying a height, try adding some padding to the li elements.
Take a look at the DEMO.
ul{
width: 50%;
}
li{
display: inline-block;
padding:20px 0;
vertical-align:middle;
border:1px solid blue;
text-align:center;
}
MODIFY
XHTML
<ul>
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
CSS Style
ul{
width: 50%;
display:table;
}
li{
display:table-row;
list-style:none;
height: 100px;
}
li > span{
display:table-cell;
vertical-align:middle;
border:1px solid red;
}
Include the following CSS code: line-height: 100px;
li{
height: 100px;
display: inline-block;
vertical-align: middle;
border: 1px solid red;
line-height: 100px;
}
Another method:
html
<ul>
<li>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</li>
<li>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</li>
<li>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</li>
<li>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</li>
</ul>
css
ul{
width: 50%;
}
li{
display: table;
border: 1px solid red;
}
span{
display: table-cell;
height: 100px;
vertical-align: middle;
}
try using display: table-cell
li {
display: table-cell;
height: 100px;
border: 1px solid blue;
vertical-align: middle;
width: 500px; /*for demonstration purpose as width does not have effect with table-cell*/
}
I'm attempting to insert a progress bar inside a td element within my table. Below is the code: <td style="width: 150px;"> <div style="height: 16px; max-height: 16px; overflow: hidden; border: 1px solid #80C622;"> < ...
In the corner of my webpage, I have three tabs: info, question, order. When I click on one tab header, only that tab should highlight. The info section includes two buttons that link to the question and order tabs. When these buttons are pressed, the respe ...
Here is the HTML code I am working with: <div class = "block1">hi</div> <div class = "block2">hi</div> In one scenario, this is the CSS being used: .block1 { width:100px; border:1px solid; float: left; } .block2 { ...
Hello, I recently set up magento2 with the sample data included. After attempting to deploy static css/JS using the command php bin/magento setup:static-content:deploy, I didn't receive any errors but the issue persists. Additionally, I am unable to l ...
I am dealing with a CSS class named "myclass" that requires a z-index of 5 specifically for IE8. I have attempted to achieve this using the following methods: .myclass{ z-index: 5\9; } ---> Interestingly, this method applies from IE10 onwards a ...
I have a tooltip that is set to appear when we hover over the div element, Is there a way to display the tooltip automatically when the page is refreshed without using Javascript? I am looking for a solution in pure CSS only. I attempted to remove displa ...
i am trying to create a system where content is hidden by default and only displayed when a checkbox is checked. The goal is to show the content when the checkbox is checked and hide it when unchecked, so that other content can be shown as well upon checki ...
When utilizing Bootstrap 5 with Bootstrap Icons, I decided to increase the size of the icon using font-size:1.5rem;. However, this caused a disruption in the vertical alignment for the links (It works fine when the styling is removed and Full Page mode is ...
My goal is to have two columns that stack divs of varying heights in the order they appear. These divs are created dynamically, causing some challenges with alignment when floated at 50% width. For example, div #4 may end up being significantly taller tha ...
Hey there! I'm facing a little issue with my code. It renders correctly on Chrome (to the right), but on Firefox (to the left) it's a bit off. Any suggestions on how I can fix this? It usually corrects itself after a refresh (zoom in/out), but al ...
I successfully added a border image to the right side of my div, but now I want it to extend slightly below the div. Is there a way to increase the height of the border image? Or should I just float the image next to the div and how would I go about doing ...
I'm struggling to figure out how to import CSS into my app component. All the information I find on Google seems to lead me in different directions... Within my component, I have defined: @Component({ styleUrls: ['../css/bootstrap.min.css&ap ...
I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...
In my quest to create a basic image slider, I've managed to achieve it using a combination of JavaScript and HTML. Take a look at the code provided below. I've included all the necessary codes for clarity's sake. However, the issue arises w ...
Attempting to incorporate photospheres into my Squarespace website has been a challenge. The Google Maps option is functional, but it doesn't meet my specific requirements and appears like this: <iframe src="https://www.google.com/maps/embed?pb=! ...
Looking to style the mobile (hamburger) menu with CSS specifically for that view. Using @media screen and (max-width: 600px) seems like a messy solution to target only the mobile menu. Is there a way to create a style that applies solely to the mobile menu ...
My challenge is to create a smaller version of a dynamically generated div that contains text, photos, and more. The original div has a height:width ratio of around 10:1. I aim to replicate this div on the same page but at 1/8 of the width. UPDATE: All t ...
I'm trying to adjust the position of the indicator but I couldn't find any information in the documentation regarding this. Here is a helpful StackBlitz example from Angular Material docs. My goal is to have the indicator displayed on the right s ...
Within a div, I have placed three radio buttons with images inline. My goal is to show a validation message using bootstrap when the submit button is clicked and there is no user input. I attempted to add another div after the radio buttons with the class ...
When using the slideToggle function, I'm encountering an issue where the content div briefly shows on the first click but then immediately slides closed. Subsequent clicks work as expected and slide open correctly. This is the Jquery script I have be ...