I have a list where it has title and secondary description besides an image icon. I want to middle align the text and image icon as
as
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<ul >
<li >
<div >
<button type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul >
<li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Run</a></li>
</ul>
</div>
<img src="https://img.icons8.com/color/48/000000/networking-manager.png"/>
A First item<br/>
<small >This is a first item description</small>
<div id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div >
<div >
<div >
<h1 id="exampleModalToggleLabel">Create a file</h1>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div > What is Lorem Ipsum? </div>
<div >
<button data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li >A second item</li>
<li >A third item</li>
</ul>
</body>
</html>CodePudding user response：
Move the <img> to the first child of the <li> and add a class of float-start to it:
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" />
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<ul >
<li >
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" />
<div >
<button type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul >
<li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Run</a></li>
</ul>
</div>
A First item<br/>
<small >This is a first item description</small>
<div id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div >
<div >
<div >
<h1 id="exampleModalToggleLabel">Create a file</h1>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div > What is Lorem Ipsum? </div>
<div >
<button data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li >A second item</li>
<li >A third item</li>
</ul>
</body>
</html>CodePudding user response：
Please try this:
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<style>
.header-intro-section {
/* display: flex; if you want to show full width, please use it */
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body>
<ul >
<li >
<div >
<button type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul >
<li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Run</a></li>
</ul>
</div>
<div >
<img src="https://img.icons8.com/color/48/000000/networking-manager.png"/>
A First item<br/>
<small >This is a first item description</small>
</div>
<div id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div >
<div >
<div >
<h1 id="exampleModalToggleLabel">Create a file</h1>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div > What is Lorem Ipsum? </div>
<div >
<button data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li >A second item</li>
<li >A third item</li>
</ul>
</body>
</html>
CodePudding user response：
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<ul >
<li >
<div >
<button type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul >
<li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Run</a></li>
</ul>
</div>
<img style="float:left;" src="https://img.icons8.com/color/48/000000/networking-manager.png"/>
/*DIV for title and description*/
<div style="float:left;" >
A First item<br/>
<small >This is a first item description</small>
</div>
<div id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div >
<div >
<div >
<h1 id="exampleModalToggleLabel">Create a file</h1>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div > What is Lorem Ipsum? </div>
<div >
<button data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li >A second item</li>
<li >A third item</li>
</ul>
</body>
</html>
The main part of solution is putting title and secondary description into div and assigning this image and div as `"float:left"`