Placing a box in the center of its parent container using CSS positioning

Check out this code snippet :

HTML

<div class="app-cont">
    <div class="app-head">
        Additional Comments :
    </div>
    <div class="app-main">
        balallalalalallalalalala
        <br/>
        jaslnflkasnlsnlksanlknslnwkin
        <br />
        lknlkanfklnlk
    </div>
</div>

CSS:

div {
    color:white;
}
.app-cont {
    background: black;
    width: 90%;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    margin-bottom: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.app-head {
    background: #484848;
    width: 25%;
    margin-bottom: auto;
    display: inline-block;
    border-top-right-radius:2px;
    -moz-border-top-right-radius:2px;
    border-bottom-right-radius:2px;
    -moz-border-bottom-right-radius:2px;
}
.app-main {
    display: inline-block;
    text-align: justify;
}

View demo

Everything seems to be working fine, except when I add more content to the app-main div. Then the app-head div moves to the bottom.

How can I ensure that the app-head div stays in the middle?

css

Answer №1

To center elements vertically, simply add the vertical align style.

.app-head,.app-main{
    vertical-align:middle;
}

This can be applied to inline-block elements in order to position them close to other inline-block elements or inline elements.

Answer №2

Initially, I was a bit unsure about the main objective, but if my understanding is correct, you are looking to keep the block containing the additional comments text centered to the right within the text?

I have made some adjustments to your fiddle to test if I have come up with the solution you are seeking: Check out the Updated Fiddle

To achieve this, I have absolutely positioned .app-head and used a combination of top:50% and a negative margin for vertical centering. It is crucial to give .app-cont a relative position for this method to be effective, and the comments section must have a left-margin slightly wider than the width of .app-head.

I hope this explanation clarifies things for you!

Answer №3

There have been some additional adjustments made...

http://jsfiddle.net/Ues8Q/4/

However, the crux of the matter is as follows:

The outer container should have: position: relative;

The item you wish to center should have: 

position: absolute; left: 0px; top: 50%; margin: -exactly half of the height of the element; height: whatever its value may be;

It is essential that the element you are centering has a fixed height...

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

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

css

Tips for resizing and positioning an image within an input field

Is it possible to have a button overlapped on an input field in a responsive website like this: https://i.sstatic.net/tnVmF.png I tried using an input group addons, but the result is not quite what I expected: https://i.sstatic.net/xpMgr.png This seems t ...

cssbootstrap-4responsive-designhtml5-canvas

Unable to specify the width of my website using full-width in Bootstrap

Using the bootstrap grid system has caused a slight issue for me. Whenever I scroll to the right side of the window, there is a white space that appears: https://i.sstatic.net/YHj92.png I have set the body width as 100vw; Is there a way to eliminate this ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

javascripthtmljquerycsshtml5-canvas

What could be the reason for this JavaScript malfunctioning in both Chrome and Safari browsers?

Why is it that the javascript works fine in Firefox for the gallery on the page below, but doesn't seem to be functioning properly in Chrome and Safari? In Chrome, the big image isn't displaying but the thumbnails are, and in Safari nothing show ...

javascriptcssgoogle-chromesafari

What is the best method for adding space between elements in flexbox layout?

I am struggling to align the child flexboxes within my parent flexbox in a single row, both vertically and horizontally centered. I want to add space between them using the gap property in CSS, but the images and embedded videos inside these child flexboxe ...

htmlcssflexbox

Seeking a precise placement, must find a CSS-only answer

After spending two days experimenting with different CSS styles like absolute positioning, inline/inline-block display, and flex display, I have yet to find a solution for styling a timestamp's label position using pure CSS. https://i.stack.imgur.com ...

htmlcsspositioncss-positionpure-css

Adjust the appearance of an element that is being inserted using .before() by utilizing a variable

Using the jQuery function .before(), I am creating an element in this format: d.children().first().before("<div class='test-div'><span class='test-span'>" + text + "</span></div>") I want to style the span dyna ...

jqueryhtmlcss

Position two div elements side by side

Here is the HTML code snippet that I am working with: <div class="demand page"> <div id="crumby-title"> <div class="page-icon"> <i class="fa fa-line-chart"></i> </div> ...

htmlcss

Utilizing numerous copies of a single plugin

I recently integrated a plugin called flip-carousel.js into my website and here is an example of how it looks on the site. Check out the sample implementation Now, I encountered an issue when trying to use multiple instances of the same plugin. When init ...

javascriptjqueryhtmlcss

Creating a dynamic and interactive table with Angular and the amazing angular-responsive-tables library

I am currently working on creating a responsive table using AngularJS. To demonstrate what I am trying to achieve, I have put together an example in this fiddle: https://jsfiddle.net/loredano/xnyzaLnu/1/ <tr ng-repeat="product in products" > &l ...

htmlcssangularjs

Adding CSS classes through the .addClass method - A guide on utilizing linked CSS files

I came across this code snippet and I have a quick question. $(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 150; // adjust as needed if(y_scroll_pos > scroll_pos_test) { $( "#cssmenu" ).addCl ...

jquerycss

Automatically switch to the designated tab depending on the URL

Is it possible to automatically activate a specific tab based on the URL structure if my tabs are configured in this way? I am looking for a solution where a link on www.example1.com/notabs.html will redirect to www.example2.com/tabs.html This particular ...

javascriptjqueryhtmlcss

Content editable div causing overflow issues in Internet Explorer

I am having trouble with a content editable div where the text is not wrapping properly. I attempted to use "overflow:scroll" but it only ends up cutting off the text horizontally. https://i.stack.imgur.com/WlMdY.jpg ...

csshtmlinternet-explorer

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

javascriptcssvue.js

Set tab navigation widget with a fixed height

I am struggling with setting a fixed height for my tabs widget so that when I add more content, it will display a scrollbar instead of expanding endlessly. I have checked the CSS and JS files but cannot figure it out. It is important for me to contain this ...

javascriptjqueryhtmlcssjquery-ui

Tips for Locating an Element by Its Attribute in JQuery

I currently have a variable that holds a list of selects, and my goal is to filter out only those with a 'dependsOn' attribute set to 'EventType'. My initial attempt below doesn't seem to work as intended and returns a count of 0: ...

javascriptjqueryhtmlcssselect

Utilizing CSS styling to create page breaks in R Markdown disrupts the flow of table of contents

Encountering difficulties in achieving a visually pleasing document using knitr's export to pdf, I have resorted to converting the html file for my Markdown project to pdf through the wkhtmltopdf command line utility tool. A simplified Markdown docum ...

htmlcssrmarkdownwkhtmltopdf

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other withou ...

javascripthtmlcss

Retain the spaces within a string in Java and JavaScript programming languages

My Java code sends data to the browser via an HTTP request, and the output looks something like this: JAVA CODE OUTPUT | Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time | | 0 | SELECT STATEMENT | | | | 3 ...

javascriptjavahtmlcssangularjs