Align text in the middle using CSS

I want to apply the following css styles

#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 150px;
 margin: 10px 0px 5px 0px;
 background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%);
}

Within a div element, I have two elements.

<div id="header">
    <p:graphicImage value="/dbimages/#{accountManagedBean.imageId}" styleClass="imageResizeAccountInfo"/>
    <h:outputLabel value="#{accountManagedBean.account.userName}" style="font-size:40px"/> 
</div>

One of them is an image, and the other is text. I aim to align the image on the left side while centering the text both vertically and horizontally.

The resulting HTML code looks like this:

    <div id="header">
        <img id="mainForm:j_idt164" src="/ui/dbimages/2805" alt="" class="imageResizeAccountInfo" />
        <label style="font-size:40px">dvargo</label> 
    </div>

Currently, they appear next to each other. As a beginner in css, I have put together this design using composition technique so far.

Is there a way to achieve the desired layout?

htmlcss

Answer №1

Your div already has width and height properties defined. To align its content vertically, you can implement the following additional CSS rules.

display:table-cell; vertical-align:middle

To position your image to the left, you can use float: left or 

position: relative; top: xxx; left: xxx;
. Alternatively, you can set the image as the background of the div (using no-repeat) and adjust the spacing with padding-left.

Check out this JS Fiddle example featuring a cute smiley face image: http://jsfiddle.net/wCpfs/

Answer №2

To vertically center text, apply the line-height property. Additionally, use text-align:center to align text in the center.

Experiment with this code snippet:

#main-content {
   text-align:center;
   line-height:200px;
}

Answer №3

It's possible to center text by specifying its height, allowing for better positioning.

.profilePictureAdjust {
 float:right;
}
#banner p {
  position relative;
  left: ZZ;
  top: AAA;
}

Make sure to adjust values of ZZ and AAA as needed.

Answer №4

To ensure proper alignment, it is recommended to specify the label's display property as table-cell and then set the vertical alignment using the following code:

#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 150px;
 margin: 10px 0px 5px 0px;
 background-image: linear-gradient(to top, #CACACA 0%, #EFEFEF 100%);
    display: table;
}

#header label{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

You can view the outcome in this jsfiddle link: http://jsfiddle.net/HRtZL/2/

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

What could be causing the vertical alignment issue of this logo in its parent container?

I am having an issue with the vertical centering of the logo element within the <header> container on this page. It seems to be more pronounced on mobile devices compared to desktop. However, the second element (#forum-link) is aligning correctly. W ...

htmlcssresponsive-design

Unusual issue in IE causing rendering problems in reporting services

Currently, I am creating a report using Reporting Services 2008, MVC 2, and Ajax as my development technologies. When I generate the report, everything displays perfectly if there is data present. However, if there is no data, the report body gets cut off ...

javascripthtmlinternet-explorerreportingservice

Removing or hiding elements using jQuery

My HTML code includes a select tag, and when the value changes, I want to retrieve data from the database based on this new value. The data is then displayed in a new div. This new div contains a close sign that should hide the div when clicked by the user ...

jqueryhtml

Load the jQuery script only in the absence of cookies

Hey there! I have a cool fade out effect on a website I'm working on. When you go to the site, a div containing the title of the site appears and then fades away after a while. It's pretty simple yet effective. <div class="loader"><h1&g ...

jquerycsscookies

What is the best way to display and conceal elements depending on the chosen option using jQuery?

Can you help me figure out why this code isn't working as expected? <Script> $('#colorselector').change(function() { $('.colors').hide(); $('#' + $(this).val()).show(); }); </Script> < ...

jqueryhtmlhtml-select

When it comes to creating a CSS drop-down menu, don't forget to incorporate an additional <ul

I've created a drop-down menu using CSS with 5 visible list items. When hovering over one of the list items, it highlights and triggers a drop-down effect to display another list underneath. Essentially, you have an initial set of options, and upon ho ...

htmlcss

Code Not Functioning on Website Despite Working in Console

I've developed a jQuery script that eliminates any delivery methods containing the phrase "Royal Mail" if certain products are present in the user's cart. The script functions flawlessly when executed in Google Chrome Console but fails to work wh ...

javascriptjqueryhtml

Using Ajax to implement a content slider with lightSlider

Seeking assistance in developing a dynamic content slider utilizing the LightSlider plugin. Currently, I have a script that fetches content from a database table (outputting JSON to HTML) and displays 6 div's of content per slide. However, I aim to di ...

javascriptjqueryhtmlajax

Problem with HTML relative paths when linking script sources

Having trouble with a website I constructed using Angular. The problem lies in the references to javascript files in index.html. The issue is that the paths in the HTML are relative to the file, but the browser is searching for the files in the root direct ...

javascripthtml

Unexpected behavior observed when trying to smoothly scroll to internal links within a div, indicating a potential problem related to CSS dimensions and

Within a series of nested div containers, I have one with the CSS property overflow:hidden. My goal is to smoothly scroll to internal links within this specific div using jQuery. The snippet of code below has worked successfully in previous projects: ...

javascriptjquerycssscroll

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

javascriptjqueryhtmlcss

How to determine button placement based on the content present on the page

I'm struggling to find the right CSS positioning for a button on my page. I want the button to stay fixed in a specific location, but when there's a lot of content on the page, I need it to adjust its position accordingly. Initially, I want the ...

javascripthtmlcssbuttoncss-position

How to reference global Sass variables in a Sass module

My preferred method involves utilizing a global .scss file that houses all the foundational styles, such as primary color selections. Following this, I create separate modules for each React Component to maintain organization and reduce the need for import ...

csssassnext.js

Having Trouble Changing CSS with Rails Link_to CSS ID

While following the ruby on rails guide, I came across a specific way to write link_to's with a css id: <%= link_to "About", about_path, id: "third" %> I also attempted: <%= link_to ("About", :id => "third"), about_path %> Although ...

ruby-on-railscss

The many potentials of looping through Sass maps

My sass map contains a variety of color shades, and the full code can be found on Codepen: $pbcolors: ( pbcyan : ( 50: #E5F5FC, 100: #CCEBF9, 200: #99D7F2, 300: #66C3EC, 400: #33AFE5, 500: #009DBF, 600: #008CAB, 700: #007C98, 800: #006D85, 900: #005D72 ...

cssloopsdictionarysass

Enhance your iPhone web app with high-resolution retina images!

As I develop a mobile web application accessible on any smartphone, I have the index.html file available for review: The app includes 2 jQuery functions. One detects if the user is using an iPhone and displays a bubble with instructions to add it to the h ...

javascriptiphonecssweb-applications

The padding of elements changes accordingly as the dimensions (width/height) of the header are adjusted

Currently, I'm tackling the challenges of working on my website and trying to understand JavaScript better. I am facing an issue where I want my aside menu's padding to adjust when my header shrinks in height. Furthermore, at the end of the web ...

javascriptjquerycssjquery-animateanimate.css

Adjust the text placement on the toggle switch to turn it On or Off

I am looking to create a toggle switch with a small size. I found some code on Stack Overflow that I tried but it didn't work as expected. The code snippet I attempted to use is from another helpful post. My goal is to have the "on" text align to th ...

htmlcss

A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...

javascriptjqueryhtmlcss

Differences in React projects utilizing materialize-css compared to those using react-toolbox or material-ui

Is there a difference in technical benefits or code reliability when directly using material-css in JSX versus utilizing JSX specific libraries like material-ui or react-toolbox? Conversely, could using JSX libraries like material-ui or react-toolbox provi ...

javascriptcssreactjsmaterializematerial-ui