Using CSS align all objects

View: 547    Dowload: 0   Comment: 0   Post by: hanhga   Category: References   Fields: none

One of the things that make you feel the most difficult in the css that is centered. Usually we generally use margin: 0 auto; to center the object horizontally for use, however if to center the object vertically for it anymore, then do not be.

căn giữa, center object

There are many tips and guides are available online for you to center the object both horizontally and vertically, but two tips that I share below will not be disappointed because it could centered absolutely without risk having problems with any popular browser out there now.

Suppose that we we need to center the image inside a <div> tag we will try in 2 ways:

Option 1:

HTML

1
<div class="wraptocenter"><span></span><img src="images/1.jpg" ></div>

Và để canh giữa hình ảnh, các bạn dùng đoạn CSS như sau :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style type="text/css">
 
.wraptocenter {
 
    display: table-cell;
 
    text-align: center;
 
    vertical-align: middle;
 
    width: ...;
 
    height: ...;
 
}
 
.wraptocenter * {
 
    vertical-align: middle;
 
}
 
/*\*//*/
 
.wraptocenter {
 
    display: block;
 
}
 
.wraptocenter span {
 
    display: inline-block;
 
    height: 100%;
 
    width: 1px;
 
}
 
/**/
 
</style>
 
<!--[if lt IE 8]><style>
 
.wraptocenter span {
 
    display: inline-block;
 
    height: 100%;
 
}
 
</style><![endif]-->

Cách 2 :

HTML

1
2
3
4
5
<div class="box">
 
    <img src="images/1.jpg" >
 
</div>

And paragraph css looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
box{
 
    background:#333;
 
    width:400px;
 
    height:400px;
 
    padding:10px;
 
    color:#fff;
 
    margin:0 auto;
 
    position:relative;
 
}
 
.box img{
 
    margin:auto;
 
    position:absolute;
 
    top:0; left:0; right:0; bottom:0;
 
}

In this way you only need to pay attention to the format .box img {...} because this is the key to center the object.

This is the second way that I see between the best soup, if you do have a better way, do not hesitate to share for everyone with anything.

Using CSS align all objects

One of the things that make you feel the most difficult in the css that is centered. Usually we generally use margin: 0 auto; to center the object horizontally for use, however if to center the object vertically for it anymore, then do not be.

Posted on 29-07-2015 

Comment:

To comment you must be logged in members.

Files with category

  • Instructions for installing and configuring Windows Live Mail on Windows 10 simple

    Instructions for installing and configuring Windows Live Mail on Windows 10 simple

    View: 3263    Download: 0   Comment: 0

    Category: References     Fields: Other

    Windows 10 pre-installed Mail application for managing personal email on the device. The latest version of this application but improved a lot and support other email accounts such as Gmail or Yahoo Mail but users almost no "salty" really with this...

  • Step by step instructions to create social networking buttons with CSS3

    Step by step instructions to create social networking buttons with CSS3

    View: 2288    Download: 0   Comment: 0

    Category: References     Fields: Other

    CSS3 help web designers have the ability to create buttons (buttons) very nice, today I will share with you two tips decoration for button in your web becomes radiant beauty that no need to use photoshop.

  • You should understand the CSS Box Shadow

    You should understand the CSS Box Shadow

    View: 2346    Download: 0   Comment: 0

    Category: References     Fields: Other

    Effects his shadow was introduced in the previous article, however, in this article, I will guide more specific about shadow attributes, you try it with anything. First we try to learn css following paragraph:

  • How to do button movement with beautiful CSS3

    How to do button movement with beautiful CSS3

    View: 2052    Download: 0   Comment: 0

    Category: References     Fields: Other

    Previously to create motion effects button, you must draw the button in photoshop, then switched to flash to make it possible to move. But now you need not spend too much time doing it, all because of the emergence of CSS3.

  • Create a dropdown menu with CSS3 effects with beautiful transtions

    Create a dropdown menu with CSS3 effects with beautiful transtions

    View: 2283    Download: 0   Comment: 0

    Category: References     Fields: Other

    More of the dropdown menu you want to introduce to you, this will have the effect menu transitions (converted background of menu background from pale to dark). This menu works well on browsers like FF, Chrome, Safary, but unfortunately did not work...

  • How to hack css for all browsers you should know

    How to hack css for all browsers you should know

    View: 1875    Download: 0   Comment: 0

    Category: References     Fields: Other

    In the process of web design, which makes it the most headaches is how to design web pages that you can run on the browser. Especially when clients use the old as IE6 browser such. However, with this article, you will easily edit interface runs well...

  • Create Accordion with extremely beautiful CSS3

    Create Accordion with extremely beautiful CSS3

    View: 2371    Download: 0   Comment: 0

    Category: References     Fields: Other

    Accordion is a technique that helps you shortened the content that you want displayed on the website. It is often used for the display of submenus. In addition you can also use it for content, images. Before applying this procedure, you have to use...

  • Create the effect Hovercho images with Webkit and CSS3 is great

    Create the effect Hovercho images with Webkit and CSS3 is great

    View: 2008    Download: 0   Comment: 0

    Category: References     Fields: Other

    WebKit is one open source application framework provides the necessary components built one for your web browser. Along with CSS3, cả have contributed to very nice effect những previously only using JavaScript or JQuery thực beige.​

 
File suggestion for you
File top downloads
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd