0

I've defined an html/css page with the following code:

<!DOCTYPE html>
<html><head>
<title>TEST1</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.main-rows {
 display: flex;
 flex-flow: column;
}

.main-columns {
 display: flex;
 flex-flow: row;
}

.dividerv {
 background: black;
 width: 4px;
}

.dividerh {
 background: black;
 height: 4px;
}

</style>
</head>
<body>
 <div class="main-rows">
  <div>
  This is an example text <br/>
  This is an example text <br/>
  This is an example text <br/>
  This is an example text <br/>
  <br/>
  <br/>
  </div>

  <div class="dividerh"></div>

  <div class="main-columns">
   <div class="dividerv"></div>
   <div class="main-rows">
    <div style="border: 1px solid black;">
     <button style="margin: 0 auto;">&rarr;</button>
     <div>blah, blah, blah, blah</div>
     <button>&larr;</button>
    </div>
    <div style="border: 1px solid black;">
     <button style="margin: 0 auto;">&rarr;</button>
     <div>blah, blah, blah, blah</div>
     <button>&larr;</button>
    </div>
   </div>
   <div class="dividerv"></div>
   <div class="main-rows">
    <div style="border: 1px solid black;">
     <button style="margin: 0 auto;">&rarr;</button>
     <div>blah, blah, blah, blah</div>
     <button>&larr;</button>
    </div>
   </div>

   <div class="dividerv"></div>
  </div>
 </div>
</body>
</html>

The main question is: how to center horizontally the buttons with the arrows ? I've tested several solutions based on "text-align" and similar but without success (please, take that into account before to flag as duplicated).

In addition, it will be welcome how to simplify this code. In particular, how to skip the need to repeat the blocks as:

            <div style="border: 1px solid black;">
                <button style="margin: 0 auto;">&rarr;</button>
                <div>blah, blah, blah, blah</div>
                <button>&larr;</button>
            </div>

that will change from one to other only in the actions associated to each button ("onclick" functions) and the text that appears between the buttons. Could be a javascript solution could allow this part.

Thanks a lot.

pasaba por aqui
  • 3,446
  • 16
  • 40
  • 1
    Possible duplicate of [What, exactly, is needed for "margin: 0 auto;" to work?](https://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work) – Maharkus Apr 04 '18 at 12:07

2 Answers2

2

Just add this to your css:

button{
  display: block;
  margin: 0 auto;
}

You need to repeat it all the time, HTML doesn't have something like variables.

You can make a PHP file with the HTML code and then include it via PHP ( <?php include "filename.php" ?> ) same can be done with javascript but on another way.

.main-rows {
 display: flex;
 flex-flow: column;
}

.main-columns {
 display: flex;
 flex-flow: row;
}

.dividerv {
 background: black;
 width: 4px;
}

.dividerh {
 background: black;
 height: 4px;
}

button{
  display: block;
  margin: 0 auto;
  }
<!DOCTYPE html>
<html><head>
<title>TEST1</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div class="main-rows">
  <div>
  This is an example text <br/>
  This is an example text <br/>
  This is an example text <br/>
  This is an example text <br/>
  <br/>
  <br/>
  </div>

  <div class="dividerh"></div>

  <div class="main-columns">
   <div class="dividerv"></div>
   <div class="main-rows">
    <div style="border: 1px solid black;">
     <button style="margin: 0 auto;">&rarr;</button>
     <div>blah, blah, blah, blah</div>
     <button>&larr;</button>
    </div>
    <div style="border: 1px solid black;">
     <button style="margin: 0 auto;">&rarr;</button>
     <div>blah, blah, blah, blah</div>
     <button>&larr;</button>
    </div>
   </div>
   <div class="dividerv"></div>
   <div class="main-rows">
    <div style="border: 1px solid black;">
     <button style="margin: 0 auto;">&rarr;</button>
     <div>blah, blah, blah, blah</div>
     <button>&larr;</button>
    </div>
   </div>

   <div class="dividerv"></div>
  </div>
 </div>
</body>
</html>
Jeremy
  • 1,384
  • 3
  • 10
  • 24
  • Thanks for your answer. Just another point, in order to combine vertical and horizontal stack of elements I'm using the styles "main-columns" and "main-rows". Is this a good method or there are a more simple one ? – pasaba por aqui Apr 04 '18 at 12:21
  • Class names don't matter, you can call it `hello-world` and it will still be good. But if you meant the styling. I am not that good with flexbox so can't help you with that. – Jeremy Apr 04 '18 at 12:24
  • Yes, I meant the style or method to reach this result. Sometimes I feel that flexbox must have an easier way. – pasaba por aqui Apr 04 '18 at 12:26
0

update your CSS like this.

button {
  display: inline-block;
  margin: 0 auto;
}
Arsen Khachaturyan
  • 7,904
  • 4
  • 42
  • 42
user3640381
  • 9