html
<ul class="tabs-bottom">
<li><a href="#tab-1">Booking</a></li>
<li><a href="#tab-2">Special Offers</a></li>
</ul>
css
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: inline-block;
text-align: center;
}
I am currently using display table-cell, but I am determined to find a solution with display inline-block.
Check out this working demo using display table-cell here
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
border-spacing: 10px 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: table-cell;
text-align: center;
vertical-align: middle;
}
If you're comfortable with changing the display property, you could opt for diaplsy:table-cell as shown below:
.tabs-bottom li{
width: 216px;
height: 55px;
background: #000;
display: table-cell;
text-align: center;
vertical-align:middle;
}
Below is the necessary CSS to ensure proper functionality, especially for accommodating very long texts that wrap around (multi-line link texts):
.tabs-bottom{
list-style: none;
margin: 0;
padding: 0;
}
.tabs-bottom li{
width: 216px;
height: 55px;
line-height: 50px;
background: #000;
display: inline-block;
text-align: center;
}
.tabs-bottom li a
{
line-height:16px; /*This prevents inheriting the li's line-height*/
display:inline-block;
vertical-align: middle;
}
To test it out, you can use this fiddle:
Please Note
Unfortunately, jsFiddle may not work in IE 7 and 8, so I couldn't verify its performance on those browsers.
For a single line, you can easily center them using line-height,
.tabs-bottom li{
width: 216px;
height: 55px;
line-height:55px
background: #000;
display: inline-block;
text-align: center;
}
If you need to center multiple lines, you can achieve this with display:table-cell;
UPDATE Check out this version for multi-line centering regardless of the number of lines: http://codepen.io/robsterlini/pen/btqjv. Keep in mind that it may default to top alignment for IE7 and earlier versions (see here).
I need to extract the inner text of the option tag using pure JavaScript This is the HTML code I am working with: <input list="in" name="i_n" class="form-control" placeholder="Enter Item Name" required> <datalist id="in" onChange="rate(this)"&g ...
My goal is to connect a channel from a third-party widget to my website through a URL link with a button. I want the channel to open directly under that specific URL. I attempted this method, but it seems to be ineffective: shareurexperience Animal "> ...
After exploring all options on the site, testing it rigorously and closely following the instructions provided, I am still unable to determine where exactly I went wrong. Website Link: The main goal is to upload an image and temporarily store it within t ...
Let's take a look at this div element : <div style=" text-align : center; font-size : min(calc(var(--fp-title-font-ratio-h) *100vh),calc(var(--fp-title-font-ratio-w) *100vw)); color ...
Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...
My website featured a banner with a series of thumbnail images that animated at different intervals and looped indefinitely. Initially, the animations ran smoothly, but after a few seconds, they began to slow down and lose consistency. To troubleshoot, I u ...
I am encountering an issue with a mat-table that retrieves its data from a database. One of the columns needs to be editable by the user so that they can update the content and reflect changes in the database. The problem lies in loading the data into the ...
I'm interested in creating a hover effect where a line appears above my text when hovering over it. The twist is, I want the hover line to match the length of each individual text. This effect will be applied to the navigation section of my HTML. Her ...
I am facing an issue with the text not displaying in the "play-stop-toggle" element, despite my limited experience with JS. My desired outcome includes: [SOLVED] The text in <div id="play-stop-toggle" onclick="togglePlay()">Play ...
First off, take a look at the screenshot to understand what I'm trying to accomplish: Within WordPress, after clicking on "New Post" and then on the "Add Media" button, a pop-up image gallery appears with an image filtering drop-down menu. My goal is ...
I feel like I'm running headfirst into a wall trying to figure out why the code I wrote for this specific website isn't quite working properly. The main content area of my pages (the white space in the link below) is supposed to extend from the ...
Hello everyone, I'm currently in the early stages of learning about Javascript and programming in general. As I prepare for a test, I've come across a question that has me feeling stuck. I need help evaluating the following statements to ...
Here's the setup I'm working with: <div class="parent"> <div class="moverBoy"></div> <div class="smartBoy"></div> </div> The parent element is fixed at 100x20 indefinitely. moverBoy and smartBoy are al ...
https://i.sstatic.net/rhWmI.png Vertical alignment is required for all the bold fields. Below is the code snippet I attempted: If there is overflow in text (non-bold), it should display as ... I made attempts with CSS and bootstrap. ...
Hey there! I'm brand new to using jQuery and I'm currently working on creating an events calendar. So far, I have successfully implemented the calendar module. Currently, when I click on a specific date, it takes me to the events.php page where a ...
My div is structured like this: https://i.sstatic.net/3fUNs.png I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" ...
I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...
I can't seem to get my footer navigation centered properly. I've tried adjusting the CSS but it's still not working as expected. .main-footer li { float: left; font-size: 0.85em; padding: 0 0.5em; margin-bottom: 0.5em; } .main-fo ...
For some reason, the first button in the div in this code is not working on HTML files. I have tried multiple JavaScript and HTML validators but none of them seem to work. Surprisingly, it works fine on codecademy.com and w3schools.com, but the issue persi ...
I am utilizing React Material UI along with the Box component to style my form. In this scenario, I have 4 items in each row except for the last row where I need to display only 3 items with the last item filling the entire row by merging two elements toge ...