Issue
I'm trying to do a centralized input with an image above it. I am doing it following the position documentation, but somehow the image doesn't get centralized horizontally:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Title</title>
<!-- Css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container position-absolute top-50 start-50 translate-middle">
<embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
<form action="/streams" method="POST">
<div class="input-group">
<input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
<button class="btn btn-danger" type="submit" id="start-button">Click</button>
</div>
</form>
</div>
</body>
</html>
I've tried to do it manually and using display flex, but with no success.
Solution
There are at least two options for how you can do that:
- Option 1: Using Bootstrap class
text-center - Option 2: Using Bootstrap classes
d-flex justify-content-centeron the parent of the<embed>
See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Title</title>
<!-- Css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Using text-center</h1>
<div class="container text-center">
<embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
<form action="/streams" method="POST">
<div class="input-group">
<input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
<button class="btn btn-danger" type="submit" id="start-button">Click</button>
</div>
</form>
</div>
<h1 class="mt-5">Using flex</h1>
<div class="container">
<div class="d-flex justify-content-center">
<embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
</div>
<form action="/streams" method="POST">
<div class="input-group">
<input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
<button class="btn btn-danger" type="submit" id="start-button">Click</button>
</div>
</form>
</div>
</body>
</html>Answered By - Rok Benko
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.