Member Avatar for servis

Have a nice Day,

i tried to use vertical-align property of css in one of my project, but it did not work at all. can anybody tell me how can we use this property properly or any other alternative technique.

thanks in advance

  • 4 Contributors
  • 8 Replies
  • 91 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

For : this thread shows the common confusion around vertical centering. correctly flagged that the property you tried is often misapplied, experimented with a value, and 's caution about cross-browser quirks reflects the era this thread started in. Today, prefer layout techniques that are explicit about the container and the axis you want to center on.

Use one of these reliable patterns depending on needs.

/* Flexbox — best for general layouts and responsiveness */
.container {
  display: flex;
  align-items: center;    /* vertical centering */
  justify-content: center;/* horizontal centering */
  height: 200px;
}
/* Grid — concise for both axes */
.container {
  display: grid;
  place-items: center;
  height: 200px;
}
/* Absolute + transform — good for a single element inside a known-size parent */
.parent { position: relative; height: 200px; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Line-height trick — only for single-line text */
.single-line { height: 48px; line-height: 48px; }

Troubleshooting notes: always confirm the container has a defined height (or uses viewport units), and check the child element display type (images are inline by default). For older browsers use table-cell fallbacks or a small JS polyfill. For reference and compatibility details see vertical-align - MDN and Centering in CSS — CSS-Tricks.

Recommended Answers

All 8 Replies

Member Avatar for omol

What are you trying to achive with vertical-align?

Member Avatar for servis

i want to set images/text in center of block.

Member Avatar for omol

Ok in that case it's not vertical-align you need to use. vertical-align will align an elements withing an inline-level or a tabel cell.

eg. If you wanted to align an image above or below a line of text if that image is inline with that text.

I asume you have come accross centering an image horizontialy in css? You would use the same method in vertical alignment.

#blah {
position: relative;
margin-top: auto;
margin-bottom: auto;
// Plus all the other usual ie workarounds etc.
}
Member Avatar for sreein1986 
.sree {
	vertical-align: text-top;
}
Member Avatar for omol

Yeah it's not ment to be used like that!

Member Avatar for MidiMagic

Do not expect to center things vertically in the browser window. It won't work on all browsers or all screen resolutions.

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.