CSS для выравнивания изображения и текста - PullRequest
Новая
       0

CSS для выравнивания изображения и текста

1 голос
/ 03 апреля 2020

Я хотел бы создать 3 такие кнопки:

exepted

Это результат, который я получаю в браузере Google Chrome на Android:

результат

Как можно выровнять текст и изображения? Это мой исходный код. Какие свойства я должен использовать, чтобы иметь правильное выравнивание с моими элементами? Я прошу прощения за мой вопрос ie, но я никогда не разрабатываю фронтальный веб-сайт, и я сталкиваюсь с ним. 

body{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
#message_bienvenue{
  margin: 10px;
  text-align: center;
  width: 100%;
}

#bouton_mission{
  margin: 0 auto;
}

#livraison_chauffeur{
  margin: 0 auto;
  padding-top: 20px;
  width: 90%;
}

.container-fluid{
  margin-top: 70px !important;
}

.navbar-nastasi{
  position: absolute !important;
  top: 0;
  left: 0px;
}

/* BOUTON */
.btn-circle.btn-xl {
  position: relative;
  width: 70px;
  border-radius: 45px;
  font-size: 34px;
  padding: 0px;
  margin: 5px
}

.btn-circle.btn-xl img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
  background-color: rgba(255, 255, 255, 0);
}

.btn-circle.btn-small {
  position: relative;
  width: 70px;
  border-radius: 45px;
  font-size: 34px;
  padding: 0px;
  margin: 5px
}

.text-button{
  margin-top: 40px;
}

.text-button label{
  font-size: 11px;
}
<!doctype html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="">
	<title>Title</title>
	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="ressources/style.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>
	<div class="container-fluid" style="margin-top: 120px !important">
		<form method="post" action="requetes/creerMission.php" role="form" id="formulaire">
		<h1>Title :</h1>
		<hr/>
		<input class="form-control" id="item_id" type="number" name="item_id" placeholder="Numéro de bon de livraison" required>
		<hr/>
		<input class="form-control" id="item_name" name="item_name" type="text" placeholder="Client" required>
		<hr/>
		<input class="form-control" id="item_desc" name="item_desc" type="text" placeholder="Adresse" required>
		<hr/>
		<input class="form-control" id="number_items" type="number" name="number_items" placeholder="M³" pattern="[0-9]+([\.,][0-9]+)?" step="0.01" formnovalidate required>
		<hr/>
		<input class="form-control" id="item_brand"type="text" name="item_brand" placeholder="Centrale" required>
		<hr/>
		<span class="label label-default">Type</span>
		<select class="form-control form-control-sm" id="idtype" type="text" name="idtype">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
			<option>11</option>
			<option>12</option>
			<option>13</option>
			<option>14</option>
			<option>15</option>
			<option>16</option>
			<option>17</option>
			<option>18</option>
			<option>19</option>
			<option>20</option>
		</select>
		<hr/>
		<div class="container-fluid" style="margin-top: 0 !important">
			<div class="row d-flex justify-content-around">
					<button class="btn btn-circle btn-small" id="id_validate" name="myvalue" value="Value1" type="submit">
						<img src="https://i.dlpng.com/static/png/6631150_preview.png" width="40"/>
					</button>
					<button class="btn btn-circle btn-xl" id="id_validate_annulee" name="myvalue" value="Value2" type="submit">
						<img src="https://i.dlpng.com/static/png/6631150_preview.png" width="40"/>
					</button>
					<button class="btn btn-circle btn-small" id="id_validate_replacee" name="myvalue" value="Value3" type="submit">
						<img src="https://i.dlpng.com/static/png/6631150_preview.png" width="40"/>
					</button>
			</div>
			<div class="row d-flex justify-content-around text-button">
					<label>My image 1</label>
					<label>My image 2</label>
					<label>My image 3</label>
			</div>
		</div>
	</form>
	</div>

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

вы можете попробовать "вертикальное выравнивание: середина;" на родительском элементе или вручную отрегулируйте нижнее поле меньших кнопок, чтобы разместить их на месте.

0 голосов
/ 03 апреля 2020

Здесь вы go: 

body {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

#message_bienvenue {
  margin: 10px;
  text-align: center;
  width: 100%;
}

#bouton_mission {
  margin: 0 auto;
}

#livraison_chauffeur {
  margin: 0 auto;
  padding-top: 20px;
  width: 90%;
}

.container-fluid {
  margin-top: 70px;
}

.navbar-nastasi {
  position: absolute !important;
  top: 0;
  left: 0px;
}

#MainFlex {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  position: relative;
  border: 1px solid red;
  justify-content: space-around;
}


/* BOUTON */

.btn-xl img {
  height: 70px;
  width: 70px;
}

.text-button {
  margin-top: 40px;
}

.text-button label {
  font-size: 11px;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="">
  <title>Title</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="ressources/style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid" style="margin-top: 120px;">
    <form method="post" action="requetes/creerMission.php" role="form" id="formulaire">
      <h1>Title :</h1>
      <hr/>
      <input class="form-control" id="item_id" type="number" name="item_id" placeholder="Numéro de bon de livraison" required>
      <hr/>
      <input class="form-control" id="item_name" name="item_name" type="text" placeholder="Client" required>
      <hr/>
      <input class="form-control" id="item_desc" name="item_desc" type="text" placeholder="Adresse" required>
      <hr/>
      <input class="form-control" id="number_items" type="number" name="number_items" placeholder="M³" pattern="[0-9]+([\.,][0-9]+)?" step="0.01" formnovalidate required>
      <hr/>
      <input class="form-control" id="item_brand" type="text" name="item_brand" placeholder="Centrale" required>
      <hr/>
      <span class="label label-default">Type</span>
      <select class="form-control form-control-sm" id="idtype" type="text" name="idtype">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
      </select>
      <hr/>
      <div class="container-fluid">
        <div class="row d-flex" id="MainFlex">
          <button class="btn btn-circle btn-small" id="id_validate" name="myvalue" value="Value1" type="submit">
						<img src="https://i.dlpng.com/static/png/6631150_preview.png" width="40"/>
					</button>
          <button class="btn btn-circle btn-xl" id="id_validate_annulee" name="myvalue" value="Value2" type="submit">
						<img src="https://i.dlpng.com/static/png/6631150_preview.png" />
					</button>
          <button class="btn btn-circle btn-small" id="id_validate_replacee" name="myvalue" value="Value3" type="submit">
						<img src="https://i.dlpng.com/static/png/6631150_preview.png" width="40"/>
					</button>
        </div>


        <div class="row d-flex justify-content-around text-button">
          <label>My image 1</label>
          <label>My image 2</label>
          <label>My image 3</label>
        </div>
      </div>
    </form>
  </div>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...