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 is the best way to shuffle the displayed images on a website to make the order random?

I'm looking to create a unique collage using 10 image files in a folder with vanilla JS. The goal is to randomize the images within a Bootstrap container on a website while maintaining their aspect ratio by utilizing a grid layout. However, I've ...

javascripthtmlcssbootstrap-4

Stop the Bootstrap row from automatically adjusting to the height of the tallest child column element, and instead utilize the extra space below the smaller element

My current framework is Bootstrap 5.2. I am aiming to create two columns, each with a col-md-6 class inside a row. You can visualize the layout through this image: . The challenge I'm facing is the inability to add another row with col-md-6 element ...

htmlcssbootstrap-5

Center element horizontally at a specified breakpoint and below

Can I use Bootstrap 4 utilities to horizontally center an element like a <select> within a col at a specific breakpoint and below? I want to achieve this without using custom CSS. For instance, I want to center a <select> at xs and sm breakpoi ...

csstwitter-bootstrapbootstrap-4

Unable to get PrependTo to remove itself when clicked

Below is a custom jQuery script I put together: $(function(){ $("a img").click(function() { $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100); $("body").css({ ...

javascriptjqueryhtmlxhtml

change visibility:hidden to visible in a css class using JavaScript

I've put together a list of Game of Thrones characters who might meet their demise (no spoilers included). However, I'm struggling with removing a CSS class as part of my task. Simply deleting the CSS is not the solution I am looking for. I' ...

javascripthtmlcss

I'm struggling to make my div display inline

My div elements are not displaying inline, I'm thinking maybe I shouldn't use the nav and div structure like this. But starting over again seems like a lot of work. How can I fix this issue? Just so you know, I'm only on my 4th day of learn ...

htmlcss

A date picker pops up when the user clicks on an Angular input field of type text

I am looking to edit a dateTime value using Angular/Ionic, but unfortunately there is no dateTime picker available. To work around this issue, I have split the field into separate date and time fields. In order to incorporate placeholder text and format th ...

htmlangularjscordovaionic-framework

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

Strategies for modifying the title attribute within an <a> tag upon Angular click event

I am attempting to dynamically change the title attribute within an anchor tag upon clicking it. The goal is for the title attribute to toggle between two states each time it is clicked. Currently, I am able to change the title attribute successfully upon ...

htmlangulartypescript

Ensuring equal spacing between elements that are defined as a percentage, utilizing padding and margin properties

I've been searching online for a while now, but I haven't been able to find a solution that fits my needs. What I'm trying to do is space out 4 divs equally, each with a width of 25% minus the margin. The challenge is ensuring that the last ...

cssflexbox

Grids designed in the style of Pinterest

Seeking advice on aligning divs in a Pinterest-style layout. Currently, my setup looks like this: https://i.sstatic.net/erlho.png But I want it to look more like this: https://i.sstatic.net/K9FnD.png Would greatly appreciate any tips or suggestions on ho ...

javascriptjqueryhtmlcss

Altering the appearance of an input field upon submission

https://jsfiddle.net/3vz45os8/7/ I'm working on a JSFiddle where I am trying to change the background color of input text based on whether the word is typed correctly or incorrectly. Currently, it's not functioning as expected and there are no e ...

javascripthtmlcssonclickjsfiddle

Certain content appears oversized on Android devices, yet appears appropriately sized on desktop computers

I am experiencing an issue with a webpage where the text appears normal on desktop but is too big on Android devices. Below is the code snippet causing the problem: <!DOCTYPE html> <html> <head> <title>ra ...

androidhtmlcsstext

Information has been stored in the database after being updated in an

I have a field that can be edited and I want to save the changes to the database. Here is the relevant HTML code: <ng-container *ngIf="groupedVolumes"> <ng-container *ngFor="let model of groupKeys() | slice:-3" > ...

htmlangularsavechanges

Adjust the x and y coordinates of the canvas renderer

Manipulating the dimensions of the canvas renderer in Three.js is straightforward: renderer = new THREE.CanvasRenderer(); renderer.setSize( 500, 300 ); However, adjusting the position of the object along the x and y axes seems more challenging. I've ...

javascripthtmlthree.js

What is the best way to vertically align a pseudo element image using CSS?

After looking for similar questions, none of the answers seem to be working for my specific issue. This is what I'm struggling with: I am attempting to insert and center a decorative bracket image before and after certain content in the following man ...

cssvertical-alignment

Leveraging JavaScript code repeatedly

Apologies if this question has been asked before, as I couldn't find it. I have an HTML table with images used as buttons: <td> <button class="trigger"> <img src="D:\Elly Research\ CO2858\Presentation\Calypso ...

javascripthtmlcss

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

htmlcsspositionheightabsolute

Can the floating side of a div be switched after resizing?

Let's say I have two divs set up in the following configuration: |------------------------------| | div1 ------------------ div2 | |------------------------------| .div1{ float:left; } .div2{ float:right; } From my understanding, they w ...

htmlcssbootstrap-4

Adjust the left margin to be flexible while keeping the right margin fixed at 0 to resolve the spacing

To create a responsive design that adjusts based on screen size, I initially set the content width to 500px with a margin of 0 auto. This meant that for a 700px screen, the content would remain at 500px with left and right margins of 100px each. Similarl ...

javascriptjqueryhtmlcss