Displaying images with text below on the navigation bar, complemented by a sleek dividing line

I have a design in mind where I want to display 3 images at the top of a navbar, followed by centered text directly underneath each image. The spacing of the images seems to be even, but I'm not sure if this is just a coincidence or if I need to specify their placement programmatically.

Additionally, the text in my code appears to the right of the last image instead of being centered underneath it as intended. Finally, I'd like to add a solid line underneath the text to separate it from the rest of the website.

     <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"> 
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap_Left
    </a>
    <a class="navbar-brand" href="#"> 
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap_Center
    </a>    
<a class="navbar-brand" href="#"> 
      <img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block  align-text-top">
      Bootstrap_Right
    </a>     
    <div align="center">My Site<br>Po Box 12, My State</div>

  </div>
</nav>
htmlcssnavbar

Answer №1

It seems like you're talking about using flexbox for layout design, and I agree that it offers a lot of possibilities once you get the hang of it. If you need some guidance, here's a helpful video I came across a while back: flexbox video. Good luck with your project!

nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width 500px;
  border-bottom: 2px solid black;
}

.image-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

.image {
  height: 50px;
  width: 50px;
  border: 1px solid red;
}

p {
  text-decoration: underline
}
<nav>
  <div class='image-wrapper'>
    <div class='image'></div>
    <div class='image'></div>
    <div class='image'></div>
  </div>
  <p>Your Text</p>

</nav>

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

stop the leakage of CSS and JS from the subtree to the document through the inverse shadow DOM mechanism

My page contains dynamic HTML content that I want to incorporate. The dynamic content consists of only HTML and CSS, without any JavaScript. However, I have some custom global CSS styles and JS logic that need to be implemented along with this dynamic con ...

javascripthtmlcssweb-componentshadow-dom

Is there a way to enable text selection on a jQuery draggable div?

I utilized jQuery to make a specific div draggable, but I've encountered an issue. Inside this draggable box, there is some important text that I need to be able to copy and paste. However, whenever I click on the box, it triggers the dragging action ...

javascriptjqueryhtml

Resizing anchor element using CSS

Hey there, I'm having trouble scaling my anchor tag when hovering over it. Here's the code I'm using: a { color: red; text-decoration: none; transition: all 0.5s; } a:hover { ...

htmlcssanchor

Creating a running text (marquee) with CSS is a simple and efficient way to make

I encountered a significant challenge while delving into CSS animation. My goal is to create a "transform: translate" animation that displays text overflowing the content width as depicted in the image below. https://i.stack.imgur.com/sRF6C.png See it i ...

javascripthtmlcsscss-animations

Finding a Div ID with Python and Selenium

Currently, I am facing an issue where I have to interact with an image of a dropdown arrow in order to select an item that will automatically fill the input box. Both the dropdown arrow and input box are components within the dev id:decision. I require ass ...

pythonhtmlselenium

The banner may be cropped when viewing on lower resolutions such as mobile devices or when zoomed in

I've encountered a similar issue on a popular website, www.godaddy.com. When zooming in or accessing the site from a mobile device, the right side of the banner gets cut off. However, when viewed on a full-sized computer screen, there are no issues. M ...

phphtmlcsswebbanner

Creating an HTML form that resembles StackOverflow's form

I am having an issue with the behavior of my form when inserting multiple tags. I want it to function like the one on this particular website where a scroll bar appears and a new line is created. Is there a way to keep everything on the same row? Check ou ...

javascriptjqueryhtmlcss

Ways to update modal content upon clicking a button

I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions ...

javascripthtmljquerycss

Loading animation reminiscent of a whirlpool, similar to the movement

In my quest for the perfect animation, I have scoured far and wide. Unfortunately, the one I found at http://jsfiddle.net/pedox/yed68/embedded/result/ is created using css, which many browsers do not yet support fully. I also explored , but found it to be ...

javascriptajaxhtmlloader

Extracting Text from a Span Element Using XPath in Selenium

Here is the HTML code snippet: <div class="a-row a-spacing-small a-size-small"> <div class="a-row"> <a class="a-link-normal a-declarative g-visible-js reviewStarsPopoverLink" href="#" data-action="a-popover" data-a-popover="{"closeButton":" ...

javacssseleniumxpath

The alignment of CSS boxes at the top is off

My challenge is to stack 3 containers horizontally, but they have different heights and the smaller ones end up at the bottom. How can I resolve this issue? This is the code snippet I am currently using for the boxes: .brand{ border: 1px solid black; bor ...

css

Executing a function defined in a .ts file within HTML through a <script> tag

I am attempting to invoke a doThis() function from my HTML after it has been dynamically generated using a <script>. Since the script is loaded from an external URL, I need to include it using a variable in my .ts file. The script executes successfu ...

javascripthtmlangular

When the cursor hovers, a drop-down menu appears simultaneously

Currently utilizing the Bigcommerce stencil theme, I have encountered an issue where both dropdown menus appear when I hover over a link. My goal is to have only one dropdown menu pop up when hovering over a specific link. https://i.sstatic.net/paVoY.png ...

javascriptcssbigcommercestencil-compiler

What is the best way to center text within an input field?

I've been attempting to center the text in the span tag within the input field, but using "text-align": center in my css doesn't seem to be working as expected. Interestingly, when I switched the span tag to a paragraph tag, it caused the input ...

htmlcssangular

How can I invoke a function within a directive-generated HTML element's scope?

I created a custom directive that utilizes element.html() to set the HTML content. Within this HTML code, I would like to be able to invoke functions from the scope where the directive is being used. Here's an example: app.directive('myDirective ...

javascripthtmlangularjs

Using Ajax in a separate JavaScript file

How can I retrieve data from an Ajax call made from a different .js file? Here is the code snippet I have been working with: function ajax(url, success, error) { success += "(data)"; error += "(xhr, ajaxOptions, thrownError)"; console.log("St ...

ajaxhtmljquery-mobile

Achieve scrollability for right column (div) using Tailwind CSS

I am having trouble getting the content in the right column to scroll vertically. Can someone please help me identify what I'm doing wrong here? <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/> < ...

htmlcsstailwind-css

Issue with JQUERY where HTML select element is not visible

$(document).ready(function(){ var selArr = [ {val: 'corsair', text: 'Corsair'}, {val: 'evga', text: 'EVGA'}, {val: 'antec', text: 'Antec'} ]; $('#pSupply& ...

javascriptjqueryhtml

Is there a method to automatically refresh all active webpages as my Firebase Realtime database accumulates new data?

With the power of Firebase, I created a chatroom using HTML that saves all its data, including usernames and messages, in a real-time Firebase database. The chatroom currently displays sent messages upon manual page reloads or when a new message is sent, ...

htmlfirebasefirebase-realtime-databasechatroom

Creating a task management application using AXIOS and VUE for easy data manipulation

I am currently working on a small app to enhance my skills in VUE and Axios. However, I am facing a roadblock when it comes to the update functionality. I am struggling to pass the ID to the form for updating and despite watching numerous tutorial videos ...

javascriptcssvue.jsaxios