TAG center substitute

Question

TAG center substitute

Navigation

#1 by (8 votes)
#2 by (4 votes)
#3 by (0 votes)

4

I have the following form:

.table {
  max-width: 500px;
  border-collapse: collapse;
  font-size: 12;
  width: 320px;
  text-align: center;
  box-shadow: 2px 2px 2px 2px #aaa;
}

.table tr td{
  padding: 8px 8px 8px 8px;


}
.campo {
  border: 1px double black;
}

#teste {
  overflow: auto;
  max-height: 500px;
  max-width: 18ç0px;
  position:absolute;
  z-index:999; 
  left:0%; 
  top:0%;
  background-color:#fff;
  border:1px solid #000;
  padding:6px;
}

#teste2 {
  overflow: auto;
  max-height: 500px;
  max-width: 300px;
  position:absolute;
  z-index:999; 
  right:0%;
  top:0%;
  background-color:#fff;
  border:1px solid #000;
  padding:6px;
}

<div id="teste">
  <form id="form1" name="form1" method="post" action="#">
    <input type="button" onclick="ver()" value="x">
    <div id="div1" style="display: none;"></div>
  </form>
</div>

<center>
  <h1>x</h1>
</center>
<form id="form2" name="form2" method="post" action="#">
  <center>
    <table class="table">
      <tr>
        <td class="campo">
          <span id="inf1">*x</span><br/>
          <input type="text" id="txt" name="txt" size="2"/><br/>
          <span id="inf2">x?</span><br/>
          <input type="text" id="txt2" name="txt2" size="2"/><br/>
          x?
          <input type="checkbox" id="ckb" name="ckb" /><br/><br/>
          <input type="button" value="x" onclick="setaInf();">
        </td>
      </tr>

    </table>
    <br/>
    <span id="inf3"><small>*x</small></span>
  </center>
</form>

<div id="teste2">
  <form id="form3" name="form3" method="post" action="#">
    <input type="button" onclick="ver()" value="x">
    <div id="lol1" style="display: none;"></div>
  </form>
</div>

<br/><br/><br/>

<center>
  <div>
    <form id="form4" name="form4" method="post" action="#">
      <div id="lol" style="display: none;"></div>
    </form>
  </div>
</center>

I know that the <center> tag has been deprecated and, according to references, the correct one would now be to use the css text-align:center; attribute but even then I can not reproduce the same effect, see example below:

.table {
  max-width: 500px;
  border-collapse: collapse;
  font-size: 12;
  width: 320px;
  text-align: center;
  box-shadow: 2px 2px 2px 2px #aaa;
}

.table tr td{
  padding: 8px 8px 8px 8px;


}
.campo {
  border: 1px double black;
}

#teste {
  overflow: auto;
  max-height: 500px;
  max-width: 18ç0px;
  position:absolute;
  z-index:999; 
  left:0%; 
  top:0%;
  background-color:#fff;
  border:1px solid #000;
  padding:6px;
}

#teste2 {
  overflow: auto;
  max-height: 500px;
  max-width: 300px;
  position:absolute;
  z-index:999; 
  right:0%;
  top:0%;
  background-color:#fff;
  border:1px solid #000;
  padding:6px;
}

<div id="teste">
  <form id="form1" name="form1" method="post" action="#">
    <input type="button" onclick="ver()" value="x">
    <div id="div1" style="display: none;"></div>
  </form>
</div>

<div style='text-align:center;'>
  <h1>x</h1>
  <form id="form2" name="form2" method="post" action="#">
    <table class="table">
      <tr>
        <td class="campo">
          <span id="inf1">*x</span><br/>
          <input type="text" id="txt" name="txt" size="2"/><br/>
          <span id="inf2">x?</span><br/>
          <input type="text" id="txt2" name="txt2" size="2"/><br/>
          x?
          <input type="checkbox" id="ckb" name="ckb" /><br/><br/>
          <input type="button" value="x" onclick="setaInf();">
        </td>
      </tr>

    </table>
    <br/>
    <span id="inf3"><small>*x</small></span>
  </form>
</div>

<div id="teste2">
  <form id="form3" name="form3" method="post" action="#">
    <input type="button" onclick="ver()" value="x">
    <div id="lol1" style="display: none;"></div>
  </form>
</div>

<br/><br/><br/><br/><br/><br/>

<div style='text-align:center;'>
  <form id="form4" name="form4" method="post" action="#">
    <div id="lol" style="display: none;"></div>
  </form>
</div>

How do I centralize the two div´s of the first example without having to use the <center> tag?

html css

asked by anonymous 10.03.2015 / 14:24

3 answers

4

The text-align: center; style centers content within a block. In your case it did not center because you put the wrong style: text=align:center; where it should be text-align: center; .

To center the block (not its contents), as in the example of your table, you must add another style: margin: 0 auto; or margin-left: auto; margin-right: auto; . Thus, the browser will calculate the right and left margin automatically to center the block.

10.03.2015 / 14:31

0

I do not know if I understand it very well but if you want to center divs on the screen you can add the% css CSS in the div that will be aligned to the center.

19.03.2015 / 15:30

What is the difference between EmbeddedId and IdClass in Hibernate? Is it possible to generate a script from a table, from an SQL command?

score 8 · Accepted Answer

The text-align only serves to align elements inline or inline-block . The divs by default are block s, so they are not affected by this property. You can center a div horizontally by setting its left and right margins to auto . For example:

div {
  width: 150px;
  height: 50px;
  margin: 0 auto;
  background: red;
  }

<div></div>