0

I have a code to create wrapper divs containing elements I want to be vertically centered. Ok. This works fine for me, I can have a given height for top-parent container or a given height for one of the elements contained (img, span, etc). I have always a right vertically centered of elements (this is what I want)

But however I have this error.

The widths of divs have an arbitrary value, as if the browser distributed the space. I cannot use 'float' because then the table-trick does not work.

The next example I have three divs and I have arbitrary widths.... I'd like the first and second divs aligned to the left, and the third to the right. But I can't use float ,, this is the code ( the imgs are 'cut' , but you can see the pseudo-image)

<div style="display: table; width: 200px; background-color: #0099CC;">

  <div style="vertical-align: middle; display: table-cell;">
  <img src="data:image/png;base64,iVBORw0KGg..."=" width="32" height="82"></div>

  <div style="vertical-align: middle; display: table-cell;">
  <span>Load file</span></div>

  <div style="display: table-cell; text-align: center; vertical-align: middle;">
  <img src="data:image/png;base64,iVBORw0KGg..."=" width="32" height="32"></div>

</div>

Any idea would be really appreciated,

Pete
  • 57,112
  • 28
  • 117
  • 166
civiltomain
  • 1,136
  • 1
  • 9
  • 27
  • do you want the 3rd one to the extreme right of the page? – aneelkkhatri Apr 03 '14 at 11:16
  • could you not give a width of 32 to your left and right div as this would allow your middle div to expand to the correct size. Also what's the extra `="` at the end of your img src – Pete Apr 03 '14 at 11:18
  • >aneelkkhatri. I'd like to have some divs aligned to the left & others to the right. >pete : the extra = is simply an error,( even I think the broswer does nothing with it ) . And.... I dont want to have into acount the width of nothing... I'd like an automatic behaviour. – civiltomain Apr 03 '14 at 14:28

1 Answers1

0

Use the following process:

  • Replace display:table with display:inline-block
  • Use a container div with position:relative
  • Use text-align: justify to spread out the elements equally
  • Use a nested div with position:absolute; right:0; to realign the third element

Here are some related questions:

Community
  • 1
  • 1
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265