What's the deal with inline blocks and text in the middle?

Check out this code I created for a navigation bar.

HTML :

<div class="header-nav">
    <div class="header">
        <img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" />
    </div>
    <div class="nav" align="center">
        <a href="#">Home</a>
        <a href="#">Gallery</a>
    </div>
</div>

CSS : 

.header-nav {
    position:fixed;
    top:0;
    width:100%;
    left:0;
    right:0;
}
.nav {
    height: 42px;
    background-color:#FF0000;
}
a {
    display:inline-block;
    width:50%;
    height:42px;
    float:left;
    line-height: 42px;
    vertical-align: middle;
}

The text inside the a tag is currently at the top, but I want it to be vertically centered. How can I achieve that?

htmlcss

Answer №1

When utilizing the float rule, the vertical-align property might not function as expected. In such cases, it is advisable to use margins like so:

a{
    display:inline-block;
    width:50%;
    height:42px;
    float:left;
    margin: 10px 0; /* include this */
}

Alternatively,

If you prefer to utilize vertical-align, make sure to adjust the width accordingly:

a{
    display:inline-block;
    width:20%; /* decrease width */
    height:42px;
    /*float:left; */ /* remove this */
    margin: 10px 0; /* include this */
    vertical-align:middle;/* include this */
}

Demo

Updated Demo

Answer №2

Are you attempting to align "Home" in the middle of the section you've designed?

Experiment with using padding in your css code. 

a{
   display:inline-block;
   width:50%;
   height:42px;
   float:left;
   padding-top: 2px;

}

Give that a try and see how it looks!

Answer №4

How to replace float with vertical-align:

a{
    change the display property to inline-block;
    adjust width to 50%;
    set height to 42px;
    align vertically in the middle;
}

Answer №5

Follow these steps for the desired result: 1) Retain your HTML structure as it is.

2) Modify your CSS code with the following adjustments:

.header-nav {
    position:fixed;
    top:0;
    width:100%;
    left:0;
    right:0;
}
.nav {
    height: 42px;
    background-color:#FF0000;
    vertical-align:50%;
    display:flex;
    align-items:center
}
a {
    width:50%;
    float:left;
}

Check out the demo here

Answer №6

One potential solution is to add some padding to the <a> element

CSS:

a{
    padding:10px 0;
    display:inline-block;
    width:50%;
    height:42px;
    float:left;
}

You can view the example on this fiddle:

http://jsfiddle.net/abc123/

Answer №7

Incorporate this code snippet into your 'a' style: 

    line-height: 42px;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to display "xyz" using console.log() function upon button click

Why isn't the JavaScript function being executed in this code snippet? <form> <select type="text" name="month" id="month"> <option value="01">January</option> <option value="02">February</option> ...

javascripthtmlajax

Using media queries in CSS to create responsive designs

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/phone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="/assets/css/tablet.css" /&g ...

htmlcssmedia-queries

Achieving right-aligned buttons in Bootstrap

Is there a way to align a button to the left inside a div that has the class justify-content-center applied? Here is the code I tried: <div class="card-header justify-content-center"> <div> <div class="ml-5"> Text i ...

cssangularjsbootstrap-4

Create intricate text on the canvas by individually rendering each pixel

In my canvas project, I am using "fillText" to display a string such as "stackoverflow". After that, I extract the image data from the canvas to identify each pixel of the text. My goal is to capture the x position, y position, and color of each pixel. Th ...

javascripthtmlcanvashtml5-canvasparticles

Setting up automatic CSS linting in a Vue.js project for seamless correction

Is there a way to enforce linting on the <style> segment within a .vue file while coding? I have set up eslint (with airbnb ruleset)+prettier for the <template> and <script> sections, which includes some auto-correction upon saving, but I ...

cssvue.js

Creating interactive tabs within the HTML document with AngularJS

Trying to customize the tab layout on my HTML page and I have a code similar to this: <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> ...

javascripthtmlangularjs

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

I'm currently working on incorporating the select2 jquery library into my React application, which was created using create-react-app. After adding jquery and select2 to my package.json file, I was able to get the javascript functionality to work pro ...

jquerycssnpmwebpackcreate-react-app

Emojis representing flags displayed on screen

Is there an option to display a flag icon? For example, I am able to write Hello ...

htmlcss

Using html() to load dynamic data can cause the script to malfunction if the content being loaded contains special characters

Utilizing the html() function, I am retrieving dynamic data from the database and appending it to my HTML. Everything functions correctly, except when the dynamic data contains '>' or '<' tags as data. In this scenario, the script ...

javascriptphpjqueryhtmlajax

code, scripting - modal pop-up

My script currently has a popup window using window.open, but most browsers block this type of popups. I now want to change it to another popup that includes a php script, similar to what I've seen on other sites. It seems like they are using ajax. Ca ...

javascripthtmlajaxpopup

Creating a user-friendly HTML form to convert multiple objects into JSON format

Edited content: $.fn.serializeObject = function() { var obj = {}; var arr = this.serializeArray(); $.each(arr, function() { var value = this.value || ''; if (/^\d+$/.test(value)) value = +value; if (obj[this.name] !== u ...

javascriptjqueryhtmljsonforms

Blending images together can obscure surrounding elements

Is there a way to make two images crossfade on hover without hiding the text underneath? I need the text to show below the image, not behind it. Any suggestions on how to solve this issue? #center { text-align: center; } #under { text-align: cente ...

htmlcss

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...

javascripthtmlcss

Ways to achieve text transparency with CSS without converting it to an image

Is there a way to have my navigation bar indicate the selected page by changing the text color and adding a black background, while making only the text inside the current page nav transparent? For example, you can see the effect here: sammarchant.co.uk/n ...

css

Creating a balanced height for child elements using CSS

If you are looking to display a list of colors with each color occupying an equal fraction of the height, here is how you can achieve it. Imagine presenting four colors in a list with a fixed height and a thick border around it: The example shown above is ...

csswebkit

Failure of default option to appear in dropdown menu in Angular

I currently have a dropdown list in my HTML setup like this: <select id="universitySel" ng-model="universityValue" ng-options="university._id for university in universities"> <option value="-1">Choose university</option> ...

javascriptjqueryhtmlangularjs

Console command to change paragraph tag color---Modifying the color

I am attempting to change the color of all paragraph tags on a webpage to white by utilizing the console. My initial attempt was: document.p.style.color = 'white'; However, this method did not have the desired effect. Interestingly, I have had s ...

javascripthtmlcss

A common challenge in React is aligning the button and input line on the same level

I'm currently working on a React page where I have an input field and a button. My goal is to align the bottom edge of the button with the bottom line of the input. Here's the code snippet I have: `<form className='button-container'& ...

javascriptcssreactjs

Internet Explorer displaying incorrect formatting for HTML CSS tables

Having an issue with table display on IE 9/10/11. Tested code on different browsers and platforms, everything looks good except when viewed on my HTTP server (lighttpd and python SimpleHTTPServer), the table is showing up incorrectly: var cell = $(&apos ...

javascripthtmlcssinternet-explorer

I have found that the CSS property command for multiple columns functions properly in Opera and IE, but unfortunately does not work in Firefox, Chrome, or Safari

When viewing the html code below, it appears as two columns in Opera and IE10, but only one column in Chrome, Safari, and Firefox. Can anyone explain why this is happening? The styling code [ body{column-count: 2} ] seems to only be effective in Opera and ...

htmlcss