Tips for aligning links and a button vertically within a div:

Thank you for this amazing opportunity.

I am currently facing a challenge that I am finding difficult to solve due to my limited front-end development skills: I am trying to align links vertically with a button.

Here is the HTML code:

<nav>
    <div class="header_info">
        <ul>
            <li><a href="#">Get Help</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Suggestions</a></li>
        </ul>
    </div>
    <div id="header-login">
        <div class="current header_user_info"><button><a href="#">test</a></button></div>

And here is the CSS:

.header_info{
    position: relative;
    margin: 0 10px;
    color: #7E7E7E;
    font-weight: bold;
    cursor: pointer;
    padding-left: 0;
    padding-right: 0;
    list-style:none;
    float: left;
}

.header_info ul{
     display: inline-block;
     list-style: none;
}


.header_info li{
    display: inline;
    margin-right:11px;
}

.header_info li :hover{
    color: #F98866;
}

.header_info a{
    color: #7E7E7E;
}

Currently, the links and buttons are not aligned on the same line. I would like to make them look neat and professional.

Any help or enhancements to my code would be greatly appreciated.

Thanks.

View JSFIDDLE here ==> https://jsfiddle.net/5nzvwwjx/5/

javascripthtmlcss

Answer №1

To center the elements in your navigation bar, you can utilize the CSS properties 

display: flex; align-items: center;
on the nav element.

nav {
  display: flex;
  align-items: center;
}

.header_info {
  position: relative;
  margin: 0 10px;
  color: #7E7E7E;
  font-weight: bold;
  cursor: pointer;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
  float: left;
}

.header_info ul {
  display: inline-block;
  list-style: none;
}

.header_info li {
  margin-right: 11px;
  display: inline;
}

.header_info li:hover {
  color: #F98866;
}

.header_info a {
  color: #7E7E7E;
}
<nav>
  <div class="header_info">
    <ul>
      <li><a href="#">Get Help</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Suggestions</a></li>
    </ul>
  </div>
  <div id="header-login">
    <div class="current header_user_info">
      <button><a href="#">test</a></button>
    </div>
  </div>
</nav>

Alternatively, you can apply the styles display: inline-block; to both .header_info and #header-login for horizontal alignment. To ensure vertical alignment with additional content, you may use vertical-align: middle;.

.header_info {
  position: relative;
  margin: 0 10px;
  color: #7E7E7E;
  font-weight: bold;
  cursor: pointer;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
}

nav > div {
  display: inline-block;
  vertical-align: middle;
}

.header_info ul {
  display: inline-block;
  list-style: none;
}

.header_info li {
  margin-right: 11px;
  display: inline-block;
  vertical-align: middle;
}

.header_info li:hover {
  color: #F98866;
}

.header_info a {
  color: #7E7E7E;
}
<nav>
  <div class="header_info">
    <ul>
      <li><a href="#">Get Help</a></li>
      <li><a href="#">Contact Us<br>second line</a></li>
      <li><a href="#">Suggestions</a></li>
    </ul>
  </div>
  <div id="header-login">
    <div class="current header_user_info">
      <button><a href="#">test</a></button>
    </div>
  </div>
</nav>

Answer №2

Simply place the button inside the ul element within the navigation section:

<nav>
    <div class="header_info">
        <ul>
            <li><a href="#">Get Help</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Suggestions</a></li>
            <li class="current header_user_info"><button><a href="#">test</a></button></li>
        </ul>
    </div>
</nav>

The existing classes have also been transferred to the li elements for styling purposes.

Answer №3

I found a fiddle that sparked my interest: https://jsfiddle.net/yyb7p8o9/

After tidying up the HTML and addressing a few minor issues, I decided to enhance the styling by adding a 0px margin to "header_info ul" in the CSS:

.header_info ul{
     display: inline-block;
     list-style: none;
   margin: 0px
}

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

Adjust divs for mobile display using Bootstrap and CSS

I have been struggling with rearranging two divs that are stacked vertically on mobile. I want the second div to appear above the first when the screen size is reduced. Despite trying various methods such as flexbox order and direction, I have not been suc ...

htmlcssbootstrap-4

"Using AngularJs, discover the best method for redirecting to a specific state based on a flag

When the userAccess flag in the controller is false, I want to hide all application content from the user and redirect them to access.html which includes a required access form. However, when using the code below, an error transition superseded is thrown. ...

javascriptangularjsangular-ui-router

Is there a way to choose an option from a select form using a button?

Currently, I have a fully functional form set up like this: <form name="form1" method="post" action="process.php"> <p> <label for="numbers"></label> <select name="select"> <option selected disable ...

phphtmlforms

The outcome of the Bootstrap 4 grid layout was not what I had anticipated

When referring to the Bootstrap4 documentation, we find classes like col-*-num and offset-*-num for structuring page layouts. In the code snippet below, the column divisions from sm size and up are consistent, but there is a discrepancy in the layout for t ...

cssbootstrap-4

Problems encountered when trying to deploy on Firebase

I've been working on deploying my web app to Firebase, and I successfully ran the deploy script. However, when I try to access the URL, instead of seeing my app, I'm greeted with the Open Hosting Documentation page. Here is what my firebase.json ...

javascriptfirebaseweb-deployment

Unable to fetch JSON file from the local server

I'm trying to develop a server API using Koa. This server will have a single API endpoint, /api/data, which should read a local json file and display its content in the browser when a user accesses localhost:3000/api/data. const Koa = require('k ...

javascriptjsonapikoa

Effortlessly add and manipulate multiple classes in a generic class using querySelectorAll and classList, eliminating the

I'm encountering an issue that requires me to repeatedly utilize querySelectorAll with Element.classList. Each time, I must convert the NodeList obtained from Element.querySelectorAll into an Array. Then, I need to iterate over the Array using a for ...

javascriptjqueryarraysselectors-api

Enforcing precise rounding for input-group elements in Bootstrap with integrated form validation

Is there a way to make the last input-group element rounded when a validation message is present while combining Bootstrap 5's input-group with form validation? Additionally, can different validation messages be provided for first & last name in ...

htmlcssformsvalidationbootstrap-5

What could be causing the disappearance of the replaced div content after a refresh?

Does anyone have experience with using jquery in conjunction with django? I am currently trying to update the content of a div after successful user authentication. While my code is functional, I'm facing an issue where upon page refresh, it reverts b ...

jqueryhtmldjango

Divide the output results into two equal horizontal sections within the same HTML table

Is there a way to dynamically split the output of a specific result into two horizontal sections that fit within the browser width? The number of rows returned from the service is variable, so a fixed solution won't work. I also want to avoid manually ...

javascripthtmlcssangularjshtml-table

Utilize a Loader with excessively rapid request

Can anyone offer advice on how to handle requests that are too fast to display a loader properly? I currently have a submit button that displays a loader until Firebase responds (ajax request). However, the response time from Firebase is extremely quick ( ...

javascriptajaxapirequestloader

Angular URL changes causing template flickering

Currently, I am in the process of developing a small application using Angular, but I am encountering an issue with template flickering. This problem occurs when one template is displayed briefly and then immediately switches to another. In my base templa ...

javascriptangularjs

Are there any more efficient methods to retrieve an object from an arrow function in TypeScript?

Trying to retrieve an object from an arrow function is posing a challenge for me, especially with the following function f: myMethod(f: data => { return { someField: data.something }; }); I am aware that for simple types, you can condense the arrow ...

javascripttypescript

Why does ng-bind fail to display values from rootScope that have been set by using ng-click?

I am trying to save a variable within $rootScope. When I have the following structure, everything works fine and the second div displays the value: <html ng-app> ... <body> <button ng-click="$rootScope.pr = !$rootScope.pr"></b ...

javascriptangularjsangularjs-scope

`Achieving object placement on top of another object in ThreeJS`

Being new to ThreeJS, I am seeking help with a basic question. I have loaded multiple GLTF files into my scene and I need to position one object on top of another (but the position should be adjustable later on) For instance: https://i.sstatic.net/oJq1BIi ...

javascriptthree.jsgltf

How can I use a controller method/condition in MVC5 to dynamically change the colors of buttons?

My goal is to dynamically render a button on a web page based on a condition. I am contemplating implementing something like the following in the controller: public bool checkUser(){ if (User.Identity.Name == "Bob"){ return true; }else{ ...

c#htmlasp.netasp.net-mvcasp.net-mvc-5

Retrieving CSS content and resolving image references from external CSS files for the Link Validator

Currently, I am developing a Link Validator tool designed to analyze and validate all links within a specific domain based on a given seed page. For instance, when analyzing http://www.example.com/, the tool should assess all links associated with example. ...

javacssweb-applicationsjsoup

Is there a way to prevent the onClick event from executing for a particular element in React?

Currently working with Material UI, I have a TableRow element with an onClick event. However, I now need to incorporate a checkbox within the table. The checkbox is enclosed in a TableCell element, which is nested within the TableRow. The issue arises wh ...

javascriptreactjsmaterial-ui

Steps to keep the gridlines in the chart from moving

Take a look at the example provided in the following link: Labeling the axis with alphanumeric characters. In this particular instance, the gridlines adjust dynamically based on the coordinate values. How can we modify this so that the chart remains static ...

javascripthtmlcsssvgd3.js

The content displayed within an iframe appears differently compared to when it is displayed in a standalone

My Vue application includes an iframe like this: <iframe srcdoc="plot.html" width="100%" height="1200" frameborder="0" /> When rendered, it fills the page in both height and width but has gaps ...

htmlvue.jsplotly