How to create a "top 3-column bar" using divs and CSS

Looking to create a top bar with two images and text in the middle, but having trouble centering the text. This is specifically for mobile devices.

Below is my HTML code:

<img src="1.jpg" />
Company Name
<img src="2.jpg" />

I attempted the following code, however, was not successful in centering the text:

<div style="float:left"><img src="1.jpg" /></div>
<div>Company Name</div>
<div style="float:right"><img src="2.jpg" /></div>        
<div style="clear:both"/></div>

The images appear correctly, but I am unsure how to center the text between them. Any suggestions would be greatly appreciated.

Thank you!

Answer №1

To achieve the desired layout, try floating all the divs to the left with a width of 33.3%. Then, position the content within them using text-align properties. It seems that all the content in the divs is inline.

<div style="float:left; width: 33.3%;"><img src="1.jpg" /></div>
<div style="text-align:center; float:left; width: 33.3%;">Company Name</div>
<div style="text-align:right; float:left; width: 33.3%;"><img src="2.jpg" /></div>        
<div style="clear:both"></div>

See an example here: http://jsfiddle.net/Lj4wK/

Answer №2

If you want to achieve a clean and reusable layout, consider implementing the classic media object method using CSS.

Here is an example for reference - http://jsfiddle.net/tL4eW/

To implement this layout, adjust your HTML structure as follows. Place two images before your centered text element:

<div class="header">
  <img class="obj-left" src="img1.png" width="50" height="50"/>
  <img class="obj-right" src="img2.png" width="50" height="50"/>
  <div class="obj-middle"><p class="txt-center">This text should be all centered</p></div>
</div>

The CSS styling is straightforward:

.obj-left {
    float:left;
}

.obj-right {
    float:right;
}

.obj-media {
    overflow:hidden;
}

.txt-center {
    text-align: center;
}

Does this solution meet your needs?

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

Is there a way to tell when a mouse is no longer hovering over an element?

Can someone explain to me how to detect when a mouse stops hovering over an element using either Javascript or CSS? I am working on an animation where the background changes color when hovered over by a mouse, but I also want to add another animation for ...

Embracing Divs Similar to the Grid Selector in Windows Phone

Can someone help me create square divs in HTML 5, similar to the example shown? I have written this HTML5 Code - what should I include in the CSS file to achieve the desired outcome? (If Bootstrap can be used, please provide the necessary classes instead ...

Scaling images proportionally using CSS (without the need for JavaScript, ideally!)

Is there a way to proportionally scale images using CSS? I'm looking for a solution where the image adjusts to the full container size, becoming larger or smaller based on the container dimensions. Additionally, I want the image to be displayed in th ...

How can I eliminate the space between the navbar and toggle menu item in Bootstrap 4?

Upon experimenting with Bootstrap 4, I came across the default navbar template. While using it for learning purposes, I encountered difficulties when trying to modify or style the CSS. I'm having trouble understanding why there is a gap between the na ...

Is it possible to distinguish CSS for varying input types?

Is it possible to style input type=text/radio/checkbox elements differently using CSS? I'm referring to ways other than just adding a class ...

Adding a new item to a list using Ajax after a post request - focusing on layout design

I currently have an activity stream available for users to use, as well as a site-wide view. When a user posts an update, it displays a default bootstrap success alert. However, I have noticed that other websites slide down existing items and append the ne ...

Reducing the slide margins in impress.js?

When using Impress.js, I noticed that the default slides have a large left margin (or padding - it's hard to determine with Firefox's Inspector). I have a slide with a wide <pre> block that would fit if it were aligned to the left, but it d ...

Using a <div> to contain <mat-card> in Angular Material

Can you achieve the following: Show components with specified width in a row instead of the usual column layout Enclose the cards within another defined container I've been attempting to accomplish this but without success so far.... While materia ...

Implementing dynamic button functionality to toggle classes on click event

Within my interface, I have a series of buttons with the following structure: <button id="btn1" type="button" class="btn btn-default btn-sm margin-left-1"> <span class="glyphicon glyphicon-chevron-down"></span> </butto ...

The issue of unordered list page-break-inside:avoid not being effective and causing an overlap with the footer

I have designed a webpage with a header, footer, and main content that includes Bootstrap 4 card list groups. My goal is to create a printable version of this list where the elements do not break between pages. However, using page-break-inside: avoid does ...

Adding a Class with jQuery On Click Event

Trying to troubleshoot why this code isn't functioning: https://jsfiddle.net/bv6ort3g/ HTML: <div class="all-btn">All Button</div> <div class="item all"> item 1 </div> <div class="item all"> item 2 </div> <di ...

Managing quick mouse movements while resizing an element during a mousemove event

I'm seeking to implement a resizable modal that only adjusts its height. I've written some code, but when I attempt to extend it downwards quickly, it exceeds the element boundaries without any effect. I've come across codes that work proper ...

conceal parent window element upon clicking an image within an iframe

I'm facing a challenge with hiding certain buttons in a parent window when opening a modal by clicking an image inside an iframe. Below is the code snippet that I am using: In the parent window - <iframe id="gallery" src="links/gallery.html" wid ...

Having trouble with the initial tap not being recognized on your mobile browser?

When using mobile web browsers (specifically chrome and firefox on iOS), I am experiencing an issue where the hamburger menu does not trigger when tapped for the first time. For a simplified version of the HTML/CSS/JS code, you can check it out at: https ...

Leveraging PHP to construct a TABLE based on JSON data

Recently, I delved into learning PHP and successfully retrieved the JSON data I needed. However, I hit a roadblock when attempting to construct a table using this data. Despite my trial-and-error approach, I find myself stuck at this point. The current st ...

What sets id and class apart from each other?

I understand that for id we need to use the '#' symbol and for class '.' symbol. However, I am unsure of the specific purposes of both class and id in styling CSS. Can someone provide clarification on when I should use id and when I sho ...

Exploring the grid system within bootstrap

As I venture into the world of web design, I have chosen to explore Angular. However, I find myself grappling with certain concepts in bootstrap, unsure of what is the correct approach. Being a novice in this field, I appreciate your patience as I seek gui ...

JavaScript: When setting focus on a DOM element, the document.activeElement is not automatically updated

I am facing an issue where I need to manually set focus on two buttons consecutively. These buttons are jQuery-Objects stored in an array named pMenus. Below is the code snippet: function OpenSubMenus(pMenus) { pMenus[pMenus.length - 1].get(0).focus() ...

Tips for incorporating video into my beginner website

I am currently setting up a grid layout for articles and videos on my homepage. I want to ensure that all the boxes are of equal dimensions, including the ones containing videos. However, I have some queries regarding the integration of YouTube videos on m ...

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...