Member Avatar for ruwanaru

need to alight div inside another div
inner div must be aligned centerd bottom of the outer div
i have attached a image that i want

Untitled-6.jpg 20.15 KB
  • 2 Contributors
  • 1 Reply
  • 341 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by ryantroop

Dani AI

Generated

asked for an inner div centered at the bottom of its container. 's absolute-position approach is fine, but it uses a negative margin that requires you to know the inner element's width. Below are three alternatives that avoid that fragility and work well for responsive layouts.

Flexbox (simplest for modern layouts — no width math):

<div class="card">
  <div class="inner">content</div>
</div>

.card {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: flex-end;   /* align to bottom */
  width: 320px;
  height: 180px;
}

Absolute + transform (keeps the inner element flush to bottom and centers it without a fixed width):

.card { position: relative; width: 320px; height: 180px; }

.inner {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

CSS Grid (concise, especially if you already use grid):

.card {
  display: grid;
  align-items: end;       /* vertical bottom */
  justify-items: center;  /* horizontal center */
  width: 320px;
  height: 180px;
}

Quick tips: for absolute solutions the parent must be the containing block (position: relative). If the inner element can wrap or change width, prefer the transform or flexbox approaches so you don't need to recalc margins. Watch overflow and z-index if the inner element should overlap other content. For modern UIs use Flexbox for simplicity; use transform centering when you need absolute positioning but want to avoid fixed-width hacks like the one shown by .

Member Avatar for ryantroop

https://jsfiddle.net/6jbgqz0g/

<div class="parent">
  <div class="bottom"></div>
</div>

.parent
{
  position: relative;
  display: block;
  width: 300px;
  height: 200px;
  background-color: #25f;
}

.bottom
{
  position: absolute;
  width: 50px;
  height: 10px;
  left: 50%;
  margin-left: -25px;
  bottom: 0;
  background-color: #4ff;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.