CODEWITHSUNDEEP
css
user1147171
user1147171

Reputation: 1243

Is there a way to make this CSS more concise?

The following CSS seems to be doing what I want. Just wondering if it could be trimmed and still do the same thing.

.qr-setup {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:40%  ;}

.qr-setup table {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:80%  ;
}

.qr-setup table tr td {
  border: none;
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width:80%  ;
}

Upvotes: 1

Views: 217

Answers (3)

matsolof
matsolof

Reputation: 265

There's even a shorthand for

margin-left: auto;
margin-right: auto;

namely

margin:0 auto;

This code sets margin-top and margin-bottom to 0 and margin-left and margin-right to auto.

Upvotes: 0

jackcogdill
jackcogdill

Reputation: 5122

You only need this:

.qr-setup {
    width:40%;
}

.qr-setup table, .qr-setup table tr td {
    width:80%;
}

.qr-setup table tr td {
    border: none;
}

.qr-setup, .qr-setup table, .qr-setup table tr td {
    text-align: center;
    margin-left: auto;
    margin-right: auto; 
}

You can use commas to repeat the css for all that's listed.

Upvotes: 2

hammus
hammus

Reputation: 2612

.qr-setup, .qr-setup table, .qr-setup tr td {
  text-align: center  ;
  margin-left: auto  ;
  margin-right: auto  ; 
  width: 80%;}

.qr-setup {
  width:40%  ;
}

.qr-setup table tr td {
 border: none;

}

Upvotes: 2

Related Questions