Center a DIV class with CSS

Experiencing some challenges with CSS in relation to layout problems. Take a look at this screenshot: In my CSS, I have implemented the following:

.image{float:right; padding-top:10px; padding-left:10px; padding-bottom:10px;}
.description{font-size:15px; font-style:italic; padding:10px; color:#5C5C5C; text-shadow:0px 0px 1px #A1A1A1;}
.image, .description{display:block;}
.main-article{clear:both;}

However, my goal is to center the description. Here's an example: Can you provide the CSS code to position the description class div in the center like shown in the second image? Thank you

htmlcss

Answer №1

In essence, the setup will look like this: 

.description, .image {
    display:inline-block;
    vertical-align:middle;
}

Answer №2

To enhance the layout, enclose the description and image within a wrapper div and implement display: table

#wrapper { 
    display: table;
}
#wrapper .image, #wrapper .description {
    display: table-cell;
    vertical-align: middle;
}

Answer №3

IMPORTANT NOTICE! The box model is currently being revised.

To enhance the layout, consider utilizing the Flexible Box Model or Flexbox technique.

To implement this, ensure to assign the following classes to the parent element:

p-flexbox and flex-hcc

Where:

  1. p-flexbox represents parent-flexbox
  2. flex-hcc represents flexbox-horizontal-center-center

Include the following CSS rules inside your stylesheet:

.p-flexbox {
   display: -webkit-box;
   display: -moz-box;
   display: box;
}

Additionally, incorporate the following CSS rules:

.flex-hcc {

   -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
           box-orient: horizontal;

   -webkit-box-pack: center;
      -moz-box-pack: center;
           box-pack: center;

   -webkit-box-align: center;
      -moz-box-align: center;
           box-align: center;

}

You can view an example using this method here: http://jsfiddle.net/GnbZD/1/

Best regards, Leonardo

Answer №4

To adjust the position of the two items, you can specify the height of the container and then set the description to

top: 50%

Check out this example on JSFiddle:

http://jsfiddle.net/andrewliu/mS4pB/1/

UPDATE:

If you want to get creative, you can try a workaround by using containers with margin-top: 50%; and then another container with margin-top: -25%;

http://jsfiddle.net/mS4pB/9/

Answer №5

As mentioned by GCyrillus:

display: inline-block;
vertical-align: middle;

This method will work, but make sure to specify the width. Adjust the following properties:

.image{ width: 300px; padding-top:10px; padding-left:10px; padding-bottom:10px; }
.description{ width: 600px; font-size: 15px; font-style: italic; padding: 10px; color: #5C5C5C; text-shadow: 0px 0px 1px #A1A1A1; }
.image, .description{ display: inline-block; vertical-align: middle; }

Customize the widths to suit your needs. Remember to avoid the inline-block whitespace bug by either using:

.image { margin-left: -4px; } //May not work well across all browsers.

Ensure there is no whitespace between elements in your HTML:

<div class="description">
    Lorem Ipsum
</div><div class="image">
    <img />
</div>

For IE7 compatibility:

.image, .description { display: inline-block; vertical-align: middle; *display: inline; zoom: 1; }  //Consider the trade-offs between using hacks and supporting older IE versions.

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

Maintain dropdown menu visibility while navigating

I'm having an issue with my dropdown menu. It keeps sliding up when I try to navigate under the sub menu. I've spent all day trying to fix it, testing out various examples from the internet but so far, no luck. Any help would be greatly apprecia ...

javascriptjqueryhtmlcss

What is the best way to make my Bootstrap card scale down exclusively?

I am currently working on a game using HTML and JS. The game involves collecting resources to unlock new "helpers" that appear in a div. Everything is functioning well, except that the alignment of the cards in the list is off. This is because the bootstra ...

htmlcssbootstrap-5

When it comes to handling media queries, iPhone is geared towards min-width dimensions of 768

The layout of my landing page has a CSS structure that looks like this: body { background: white; } @media (min-width: 768px) { body { background: red; } } @media (max-width: 767px) { body { background: blue; } } Des ...

cssresponsive-designmedia-queries

Using the margin property creates an odd spacing issue that seems out of place

Here is the HTML and CSS code that I am using: div { background: yellow; width: 77px; height: 77px; border: 1px dotted red } #one { margin: 0px 21px 41px 41px } <html> <head> <meta charset="UTF-8"> ...

htmlcssmargin

Generate a custom comment page for every URL identifier

I am currently working on creating a PHP comment page that displays unique comments for each specific URL ID. However, I have encountered an issue where the comment page is shared among all URLs. I understand that I need to add the URL ID (bug ID) to the M ...

phphtmlajax

Tips for synchronizing JavaScript rendering time with Python requests?

My goal is to retrieve the HTML content of a JavaScript-generated website so that I can extract information using BeautifulSoup. However, when I attempt to request the HTML, the data I receive is from before the page fully loads. Below is the code snippet ...

pythonhtmlbeautifulsouprequest

Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and ...

cssruby-on-railssassspree

The arrangement of a table, an iframe, and another table being showcased in close proximity

I need assistance in aligning a table, an iframe, and another table side by side without any breaks. Ideally, I would like all three elements to be centered on the page. It seems odd that they're not displaying next to each other as my screen is larg ...

javascripthtmlformattingline-breaks

Deactivate dropdown menu selection depending on choice made in another list

I am currently working with the following code: $('select').on('change', function(){ $('select option').prop("disabled", false); $("select").not(this).find("option[value="+ $(this).val() + "]").prop('disabled ...

jqueryhtmlselectdrop-down-menu

Using the contents of a text file as text in an HTML document

I've come up with a clever time-saving trick for my website template project. I want to streamline the process of changing large text files by having a separate plain text document that will automatically transfer its contents to a designated paragrap ...

javascriptjqueryhtmlcsstext

Is there a way to prevent hover effects on the outer div when hovering over the inner div?

I am facing an issue with disabling hover effects on an outer div when hovering over an inner button. I have tried various methods but haven't been successful in achieving the desired outcome. .container { background-color: #e6e6e6; width: 400p ...

htmlcsshover

Error messages are being generated by Angular CLI due to an unclosed string causing issues with the

After incorporating styles from a Bootstrap theme into my Angular 8 project and updating angular.json, I encountered a compile error displaying the following message: (7733:13) Unclosed string 7731 | } 7732 | .accordion_wrapper .panel .panel-heading ...

cssangular

"When trying to access a jQuery ID, it is coming back as undefined even though the

I'm attempting to obtain the ID of a specific element, save it as a variable, and then utilize that ID value to interact with other elements in the same section bearing the identical ID. <div class="mainContent"> <div class="articleContent"& ...

javascriptjqueryhtml

Enhance the visual appeal of your checkboxes in React Fluent UI by customizing the color of the checked mark and

I have a React application using Fluent UI. Currently, the <Checkbox/> component is displaying with its default colors and behavior like this: https://i.sstatic.net/ZSL7I.png I want to customize the color of the checked mark and label (Green for ch ...

cssreactjstypescriptfluent-uifluentui-react

Using AdBlock Plus will conceal elements on a webpage that have ids or classes containing the term "ad"

In my website, there are two divs: one with the ID of ad_holder and the other with the ID ad_buttons. While testing the site on Mozilla with Adblock Plus installed, I observed that both divs were hidden. Upon further investigation, I discovered that Adblo ...

htmlcssadblock

showcasing a map on an HTML webpage

Seeking advice on integrating a map feature in HTML to mark store locations. Working on an app for a business community and need help with this specific functionality. Your assistance would be greatly appreciated! ...

javascripthtml

Is there a way to duplicate the background-style:contain effect on an image?

It is important to note that the image source must be declared in the HTML code as it will be dynamic, and therefore background cannot be used here. HTML <div class='some-form'> <form> <button>...<button> <i ...

htmlcss

inject the HTML content into the <div> container

Snippet: https://jsfiddle.net/x9ghz1ko/ (Includes notes.) In my HTML file, there are two distinct sections: <section class="desktop_only"> and <section class="mobile_only">. The challenge lies in positioning a JavaScript sc ...

javascripthtml

Implementing the disabled style for an ASP.net dropdownlist

Imagine I have an ASP.net dropdownlist set up like this: <asp:DropDownList ID="ddOwnershipDocumentType" class="msbdd" runat="server"> </asp:DropDownList> Let's take a look at the style definition for msdbdd: .msbdd { font-family: WM ...

cssasp.netwebforms

Issue with Firefox position: absolute not producing the desired outcome

I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...

htmlcssfirefox