CSS positioning span inside div

Question

I think I miss something, but I have following structure

.improvement_request_current {
  display: block;
  background: #777;
}

.improvement_request_current_title {
  background-color: #999;
  display: inline-block;
  margin: auto 0;
  vertical-align: center;
  color: blue;
}

.improvement_request_current_value {
  display: inline-block;
}

<div class="improvement_request_current">
  <span class="improvement_request_current_title">Just some text</span>
  <textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>

In my opinion left part should be vertical aligned by center, but CSS have other opinion ) I've tried block/inline-block/inline variants with margin: auto 0/vertical-align variants with no success. What I'm doing wrong?

P.S. Without using flex and tables please. This is management constraints (

@AhmedTagAmer "the left part should be vertical aligned". what is not clear? — Gert B., Nov 10 '21 at 08:06
@GertB. thanks, I know about it, but I can't use it, this is a head direction. As I can't use table :/ — DuhVir, Nov 10 '21 at 08:10
Ranas answer shows you exactly how you should do that. Using tables is a no-go indeed. — Gert B., Nov 10 '21 at 08:13
@GertB. yes. I upvote answer because it's good and straight. But I have constraints and can't use it. May be outdated browser with no flex support or something, I don't know. Earlier there was float left; and top aligned which works 2 years, but new HR says it must be changed ( — DuhVir, Nov 10 '21 at 08:15
Flexbox is supported by all modern browsers. If the browser is that outdated so it does not support flexbox, it shouldn't be used anymore. And not only because of missing functionality. There is another way: you can give the span a `display:block;` min height of 100% and use the `margin: auto 0;` But i would not recommend that — Gert B., Nov 10 '21 at 08:19
@GertB. I discover the reason with flex and tables denied. Outdated browser but for reason. It's a web-server on production equipment and machines, which are 10years+ with build-in client . Some type of ie6 i think. And yes main reason were center instead of middle, so insulting mistake ( — DuhVir, Nov 10 '21 at 10:37

Rana · Answer 1 · 2021-11-10T11:27:51.217

Use display: flex property and it make easy to align the content. Along with it use align-items: center; to vertically center align

.improvement_request_current {
  display: block;
  background: #777;
  display:flex;
  align-items:center;
}

.improvement_request_current_title {
  background-color: #999;
  color: blue;
}

.improvement_request_current_value {
  display: inline-block;
}

<div class="improvement_request_current">
  <span class="improvement_request_current_title">Just some text</span>
  <textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>

Also one other method can be providing fixed height to parent and child(here given 100px) and than vertical-align: middle;.

But I don't recommend this method which you can see by removing comments from the background property and see that it is spanning out of parent element

.improvement_request_current {
  display: block;
  background: #777;
}

.improvement_request_current_title {
  /*background-color: #999;*/
  color: blue;
  display: inline-block;
  vertical-align: middle;
}

.improvement_request_current_value {
  display: inline-block;
  vertical-align: middle
}

<div class="improvement_request_current">
  <span class="improvement_request_current_title">Just some text</span>
  <textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>

Temani Afif has given a short and simple solution, using vertical-align: middle to text-area will solve your problem

.improvement_request_current {
  display: block;
  background: #777;
}

.improvement_request_current_title {
  background-color: #999;
  color: blue;
}

.improvement_request_current_value {
  display: inline-block;
  vertical-align: middle
}

<div class="improvement_request_current">
  <span class="improvement_request_current_title">Just some text</span>
  <textarea class="improvement_request_current_value" rows="6" cols="50" maxlength="4096"></textarea>
</div>

The one and only correct way! Should be the accepted answer. — Gert B., Nov 10 '21 at 08:14
And I should accept if no P.S. in question with constraints. I know that this is a right choice, but not an option for me ( — DuhVir, Nov 10 '21 at 08:17
@Rana indeed. I don't see any (valid) reason for not using flexbox. It IS supported by all modern browsers. — Gert B., Nov 10 '21 at 08:40
Yes, @GertB. also DuhVir `vertical-align` property has `middle` value instead of `center` — Rana, Nov 10 '21 at 08:42

CSS positioning span inside div

1 Answers1