Styling text of various sizes to appear together in a div container

I'm having trouble getting my text to align in a single line. I've tried using vertical-align: middle and vertical-align: bottom... Can someone please assist me? http://jsfiddle.net/2wDEw/

Here is a simple example of what I have:

                <div class="logo spanHalf"><a href="#"> My site </a></div>
                <nav id="menu" class="spanHalf">
                    <li><a href="#">Fetured</a></li>
                    <li><a href="#">Latest Posts</a></li>
                    <li><a href="#">Contacts</a></li>
                </nav>

And here is my styling:

#menu {
    float : right;
    display:inline-block;
    vertical-align:middle;
}

#menu li{
    padding : 10px;
    display:inline;
    vertical-align:middle;
}

#menu a, .logo a {
    text-decoration:none;
    text-transform:uppercase;
    color: black;
    font-weight:bold;
}

#menu a:hover, .logo a:hover {
    color: red;
}

.logo {
    float:left;
    display:inline-block;
    vertical-align:middle;
    font-size : 28px;
}

Desired outcome:

MY SITE FETURED LATEST POSTS CONTACTS

htmlcss

Answer №1

It seems like your example contains invalid HTML as li elements should be nested in ul or ol. Consider using span instead. This could be causing an issue because the client's browser automatically adds padding to li elements to display them as a list, even without any stylesheet unless overridden.

Check out this link for an example


<nav id="menu" class="spanHalf">
    <span><a href="#">Featured</a></span>
    <span><a href="#">Latest Posts</a></span>
    <span><a href="#">Contacts</a></span>
</nav>

Answer №2

To ensure consistency, apply the same line-height to both elements.

#menu, .row{
    line-height: 40px; /* adjust this value as necessary */
}

Don't forget to update your HTML based on John Smith's instructions.

See Working Fiddle Here

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

Alteration in relational shift of division placement

My webpage is divided into three sections with the following proportions: 15% - 65% - 20% In the right section, there is a div with the ID alchemy. I want to set the height of this div using <div style="height:150px;">. However, when I set the heig ...

jquerycss

What is the best way to ensure that text stays aligned perfectly next to an

There seems to be a problem with my CSS. The text in the <li> tag is appearing below the line of the icon. How can I resolve this issue? I want the text to be vertically centered on the line. This seems to happen when I use the ::before selector with ...

htmlcss

Experiencing an issue of receiving an undefined value while attempting to retrieve a value from an input box

HTML: <input value='Rename' type='button' onclick='RenameGlobalPhase({$row['id']});' <span id='renameGlobalPhase{$row['id']}'>" . $row['phase'] . "</span> Below you wil ...

javascriptjqueryhtml

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

I am currently utilizing Material-UI within a React 16.10 project. My goal is to create a table where the left column consists of an icon, while the right column displays a label and address stacked on top of each other. I want the items in the right colum ...

cssreactjsgridmaterial-uiwidth

Title appears to be left aligned instead of centered

My H1 is having trouble centering as I increase the font size. It positions correctly with a smaller size (30px), but when I increase the font, it becomes too low from the center even though text-align:center; is not helping to solve the issue. What adjust ...

htmlcss

Modify a section of an HTML text's formatting

function changeEveryCharColor(id) { var part; var whole = ""; var cool1 = document.getElementById(id).innerHTML; console.log(cool1); for(var i = 0; i < cool1.length; i++) { color1 = getRandomInt(255); ...

javascripthtmlcss

css displaying drop-down menu when hovered over

I've been trying to create a link that, when hovered over, displays a list of options. I've managed to make it work in Firefox and Google Chrome, but it doesn't display at all in Internet Explorer when hovering over the link. I'm also ...

htmlcss

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

javascriptjqueryhtmlcss

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

javascriptphpjqueryhtmlcss

Transform the appearance of a button when focused by utilizing CSS exclusively or altering it dynamically

As a newcomer to coding, I am currently working on a project that involves changing the color of buttons when they are clicked. Specifically, I want it so that when one button is clicked, its color changes, and when another button next to it is clicked, th ...

javascriptcssreactjs

Is there a way to eliminate the transform style from a draggable element?

I am looking to enhance the CDK drag and drop example by adding a preview of the dragged element with specific left and top positions, without utilizing the transform style. HTML <div class="example-boundary"> <div class="example- ...

javascriptcssnode.jsdraggableangular13

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

javascripthtmlcssreactjsmaterial-ui

Unleashing the power of Sass and CSS in your Next Js project

Trying to incorporate sass and css modules into my next.config.js has been challenging due to an error I keep encountering: Failed to compile. ./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css Unknown word (1:1) > 1 ...

csssassnext.jscss-loader

Calculating the dimensions of a CSS element based on its content

Is there a way to achieve this using only CSS, without needing JavaScript? I am working on a project with a lot of relative and absolute positions, where elements must be centered dynamically without specifying static widths. While I have managed to minimi ...

css

Utilize React Material UI Slider to dynamically adjust Border Radius in your web design

Utilizing React Material UI's components like the slider and button is essential for this project. The main objective is to dynamically change the border radius of the button using the value obtained from the slider. However, there seems to be a chall ...

cssreactjsbuttonmaterial-uislider

I need help with customizing the progress bar in HTML and CSS

How can I create a progress bar like the one shown below: .detail-load { height: 42px; border: 1px solid #A2B2C5; padding: 1px; border-radius: 10px; } .detail-load > .detail-loading { background: #904BFF; height ...

javascripthtmlcss

Ensure that three spans are precisely aligned to occupy a single line

My dilemma is as follows: I have a line within a document that has a set width. Now, there are 3 elements involved - one <a> tag and two <span> tags. The content in the <a> tag varies in width each time it appears on the line. The thi ...

htmlcssresponsive-design

Changing the background color of the legend text when hovering over a d3 doughnut chart

I have a doughnut chart that displays values on mouse hover. However, I would like to change the background of the legend text when hovering over the respective area of the doughnut chart. return { restrict: 'E', scope: { values: ...

htmlcssangularjsd3.js

The HTML Style for implementing HighChart title text does not work when exporting files

I have inserted the <br/> and &nbsp; HTML tags into the HighChart titles. The style changes successfully appear in the chart view, but unfortunately, when exported as PNG or JPEG images, the text style fails to apply in the resulting images. To s ...

javascripthtmlcsshighchartsstyles

Utilizing Python to dynamically create unique tags from deeply nested dictionaries through recursion

As part of my project, I am developing a unique dynamic template tool that can seamlessly integrate with any templating framework such as pugs and jinja. The goal is to create a demo that resembles the following structure: view! { div { p { ...

pythonhtmljsondictionaryrecursion