PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] how to implement the vertical alignment when changing <div> block size

 November 17, 2022     alignment, css, html, vertical-alignment     No comments   

Issue

How to implement the vertical alignment when changing <div> block size (in my example - green blocks).

What needs to change in my example, that when the browser window is resized happened vertical alignment (middle) side blocks.

vertical-align: middle or top : calc(50% - 25px) properties does not work.

Example: http://jsfiddle.net/vsdu0cn8

My case and what need
screenshot
(source: imageup.ru)

Code:

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        font-size: 0px;
      }

      .menu-block {
        max-width: calc(2 * 75px + 7 * (50px + 2 * 5px));
        background-color: #ff8080;
      }

      .menu-block .menu-edge {
        display: inline-block;
        position: relative;
        left: 0px;
        width: 75px;
        height: 50px;
        vertical-align: top;
        background-color: #80ff80;
      }

      .menu-block .menu-container {
        display: inline-block;
        width: calc(100% - 2 * 75px);
        text-align: center;
        background-color: #ff80ff;
      }

      .menu-block .menu-container .menu-element {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 0px 5px;
        font-size: 20px;
        background-color: #ffff80;
      }
    </style>
  </head>
  <body>
    <div class='menu-block'>
      <div class='menu-edge'></div>
      <div class='menu-container'>
        <div class='menu-element'>#1</div>
        <div class='menu-element'>#2</div>
        <div class='menu-element'>#3</div>
        <div class='menu-element'>#4</div>
        <div class='menu-element'>#5</div>
        <div class='menu-element'>#6</div>
        <div class='menu-element'>#7</div>
      </div>
      <div class='menu-edge'></div>
    </div>
  </body>
</html>


Solution

by setting the container with display:flex you can use align-items: center in order to center your text verticaly.

Please see the updated JSFiddle:

HTML:

<div class = 'menu-block'>
    <div style="display:flex; align-items: center">
    <div class = 'menu-edge'></div>
    <div class = 'menu-container'>
      <div class = 'menu-element'>#1</div>
      <div class = 'menu-element'>#2</div>
      <div class = 'menu-element'>#3</div>
      <div class = 'menu-element'>#4</div>
      <div class = 'menu-element'>#5</div>
      <div class = 'menu-element'>#6</div>
      <div class = 'menu-element'>#7</div>
    </div>
    <div class = 'menu-edge'></div>
  </div>
</div>


Answered By - Oron Bendavid
Answer Checked By - Cary Denson (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing