Vertical alignment

-

There are several ways of vertical alignment. In different situations, different ways are suitable. Consider some of them.

1. With display: flex

It's the most convenient and modern way

.parent{
	display: flex;
	align-items: center;	
}

2. With table-cell

In table cells, vertical-align applies to any content.

.parent{
   display: table;
}
.child{
   display: table-cell;
   vertical-align: middle;
}

3. With position: absolute и top

It is suitable for cases with a known height of the child block. The principle of operation lies in top: 50% (half of the parent block) and a negative indent from above into half of the child block. In the same way, you can center the block horizontally, using only left: 50% and a negative margin on the left.

.parent{
    position: relative;
}
.child{
    position: absolute;
    height: 50px;
    top: 50%;
    margin-top: -25px;
}

4. With position: absolute and margin

There is another way to center using absolute positioning. The height of the child block must be fixed. You can also center the child unit horizontally. Then the width must also be fixed.

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto;
    height: 30px; /*your value*/
    width: 200px; /*your value*/
}

5. Align one line

The block height and row height must be the same.

height: 30px;
line-height: 30px;
display: inline-block;
text-align: center;
text-transform: uppercase;

Comments

Post a Comment

Popular posts from this blog

JavaScript Inheritance and Classes

-
In many programming languages implemented inheritance. And it also exists in JavaScript. First, consider prototype inheritance. We describe the function constructor function Animal(name, weight, color){ this.name = name || 'someAnimal'; this.weight = weight; this.color = color; //do some actions during initialization console.log(this.name + ' construct animal'); } // write the method to the prototype Animal.prototype.sayName = function(){ console.log(this.name); } We describe the constructor function that inherits the Animal class. And we will expand it, we will add in addition own properties and methods function Mammal(name, weight, color, limbs){ Animal.apply(this, arguments); this.limbs = limbs || 4; console.log(this.name + ' construct mammal'); } Mammal.prototype = Object.create(Animal.prototype); Mammal.prototype.constructor = Mammal; Mammal.prototype.run = function(){ console.log('run'); } Cre
Read more

Typical gulpfile.js

-
The file is written for Gulp 4 . The file is designed to work with styles ( SCSS ) and JavaScript . All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files. const production = ( process.env.NODE_ENV == 'production' ); //base part let {src, dest, parallel, series, watch} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'); //css part let sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'), uglify = require('gulp-uglify-es').default, include = require("gulp-include"); let pathFiles = { build: { css: './css/', js: './js/' }, src: { css: './src/scss/**/*.scss', js: './src/js/**/*.js' } }; function swallowError(error){
Read more

Swipe events on touch devices

-
Every day sensory devices are being introduced into our lives. These devices have specific events, unlike the desktop. One of these events is the swipe . Especially often have to deal with it when developing a mobile version of the site. Code: (() => { let initialPoint; let finalPoint; document.addEventListener('touchstart', function(event) { initialPoint=event.changedTouches[0]; }, false); document.addEventListener('touchend', function(event) { finalPoint=event.changedTouches[0]; let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX); let yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); if (xAbs > 20 || yAbs > 20) { if (xAbs > yAbs) { if (finalPoint.pageX < initialPoint.pageX){ // to left } else{ // to right } } else { if (final
Read more