I can't center align my image border radius with the text-CodePudding

I ma finding it difficult to center text with the image border-radius of 50%. Her is the code below

<div>
<img src="images/kristen.png" alt=""  >
<span>Kristen Wu</span> 
[![Example image][1]][1]</div>


.box{
border-radius: 50%;
display: flex;
height: 40px;
align-items: center;
text-align: center;
margin-top: 20px;
}

Attached is an image of how I want it to look like

CodePudding user response：

I'm sorry if my answer is not right, because i catch your mean is to make align center. Maybe it can help

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
div
{
   width:100px;
   height:75px;
   background-color:red;
   border:1px solid black;
}
#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
   background-color:yellow;
}
.box{
border-radius: 50%;
display: flex;
height: 40px;
align-items: center;
text-align: center;
margin-top: 20px;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class = "wrapper">
<img src="images/kristen.png" alt=""  >
<span>Kristen Wu</span> </div>



</body>
</html>

CodePudding user response：

Can you upload an image of what the expected outcome should look like?

To center the image within your div tag, you can achieve this by applying:margin: 0 auto; in your .box class.

This is equivalent to the following:

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

Basically centering your image horizontally.

CodePudding user response：

The easiest way to align something to centre in HTML is the center tag. You can use that to centre anything. And the code you wrote for border radius is also correct.

PS. center is the right spelling for the code. IF you write centre, it wont work