How to format data within a DIV(alignment and source)?

Asked

Viewed 522 times

0

I need to correctly align the information inside the following Ivs, place the image on the left, the title in blue next to the image on the right and the temperature just below the title in blue, as illustrated in the second image 2 that I edited in the way I want it to be.

Image 1: Imagem 1

Image: 2 Imagem 2

code:

#container {
  width: 80%;
  text-align: center;
  display: table;
  margin: 0 auto;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2em
}

.interna {
  font: 150%/1.2 Arial;
  float: center;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  width: auto;
  /* Valor da Largura */
  height: 100%;
  width: 25%;
  background: #E8E8E8
}

#chart_div {
  font: 150%/1.5 Arial;
  float: center;
  display: inline-block;
  vertical-align: middle;
  margin: 10;
}

._margin-b-5 {
  margin-bottom: 4px;
}

._block {
  display: block!important;
}

.-dark-blue {
  color: #004983!important;
}

.-bold {
  font-family: Roboto-Bold;
}
<html lang="en">

<head>
  <title>Monitoramento</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
  <!-- JS -->
  <script src="api/jquery.min.js"></script>
  <script src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </script>
</head>
<div id="container">
  <div id="interna" class="interna col-xl m-5 pb-6 shadow-lg p-3 mb-4  rounded-sm border border-left-0 border-top-0">
    <img src='img/quente.png' width=30 height=60>
    <span class="_block _margin-b-5 -bold -dark-blue">Nobreak</span> 28.35º
  </div>
</div>

</html>

html css twitter-bootstrap div bootstrap-4

1 answer

0


Guy has several details in his code, he is not well formatted within the criteria of the Bootstrap Grid that you are using... But to do what you want just put the native classes d-flex justify-content-center align-items-center in div with the id interna

inserir a descrição da imagem aqui

<html lang="en">

<head>
  <title>Monitoramento</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/dist/css/bootstrap.min.css">
  <!-- JS -->
  <script src="api/jquery.min.js"></script>
  <script src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </script>
  <style>
  #container {
  width: 80%;
  text-align: center;
  display: table;
  margin: 0 auto;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2em
}

.interna {
  font: 150%/1.2 Arial;
  float: center;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  width: auto;
  /* Valor da Largura */
  height: 100%;
  width: 25%;
  background: #E8E8E8
}

#chart_div {
  font: 150%/1.5 Arial;
  float: center;
  display: inline-block;
  vertical-align: middle;
  margin: 10;
}

._margin-b-5 {
  margin-bottom: 4px;
}

._block {
  display: block!important;
}

.-dark-blue {
  color: #004983!important;
}

.-bold {
  font-family: Roboto-Bold;
}
  </style>
</head>
<div id="container">
  <div id="interna" class="interna col-xl m-5 pb-6 shadow-lg p-3 mb-4 rounded-sm border border-left-0 border-top-0 d-flex justify-content-center align-items-center">
    <img src='img/quente.png' width=30 height=60>
    <span class="_block _margin-b-5 -bold -dark-blue">Nobreak</span> 28.35º
  </div>
</div>

</html>

  • Yeah, I’m learning how to develop web yet, I started now to use bootstrap and to be a bit confused, I’m gradually getting acquainted haha but thank you, it helped me a lot in what I wanted.

  • 1

    @Douglas that there, focuses on the studies, and if you really want to follow with the BS, read and reread the documentation, it is quite complete, and 90% of the things to do with the native classes. And mainly, study GRID a lot, it is the basis of Uro, and you put a col, as direct daughter of a container is not indicated... you may have responsiveness problems if you do not follow the grid correctly. Good studies there

Browser other questions tagged html css twitter-bootstrap div bootstrap-4

You are not signed in. Login or sign up in order to post.