Text outputting below div-CodePudding

It works fine and is centred when the text is smaller, but for longer lines the text is outputted below the division

Below is the code. Its a div with 2 div side by side, where in the left div has an imp. I want text to be centred in the right div.

<div style={{ height: '12rem',textAlign: 'center', lineHeight: '12rem', backgroundColor: '#edf2f4'}} className="shadow rounded">
  <div style={{width: '30%', float: "left", height: '10rem'}}>
    <img src="https://images.unsplash.com/photo-1657299170964-205905bb0940?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" style={{ width: '100%', height: '10rem', objectFit: 'contain'}} />
  </div>
  <div style={{ float: "left", paddingLeft: '2rem', overflow: 'auto'}}>
    <p>vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv</p>
  </div>
</div>

CodePudding user response：

You can add style text-align: center on the text

<p style={{ text-align:"center"}}>vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh  hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv</p>

CodePudding user response：

It seems that you use some other frameworks in your project, because the normal way of using inline style is not similar to style={{width: '30%', ... }}. Any way I changed your styles to normal syntax and modify them like the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *, *::after, *::before {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<!-- "height: 12rem" is not enough for long text. you can set a longer height. so that the text is inside div.  -->
<div style="width: 100%; height: 45rem; background-color: #FFf204; text-align: center; line-height: 12rem">
  <div style="width: 30%; float: left; height: 10rem">
    <img src="https://images.unsplash.com/photo-1657299170964-205905bb0940?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" style="width: 100%; height: 10rem; object-fit: contain" />
  </div>
  <div style="float: left; padding-left: 2rem; overflow: auto; width: 70%">
    <p>vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv</p>
  </div>
</div>
    
</body>
</html>

In the above code I added some styles like adding box-sizing: border-box; in the head section and adding width: 70% for second div. But the main problem you mentioned (text is outputted below the division) comes from this fact that the height: '12rem' is not enough for long text. You can read this article that helps you better understand the behavior of float styles. According to that article a better solution for your problem is using overflow: auto; like the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *, *::after, *::before {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<!-- use "overflow: auto;" and "height: auto;" to automatically set the height of the parent of float elements to 100%.  -->
<div style="width: 100%; height: auto; overflow: auto; background-color: #FFf204; text-align: center; line-height: 12rem">
  <div style="width: 30%; float: left; height: 10rem">
    <img src="https://images.unsplash.com/photo-1657299170964-205905bb0940?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" style="width: 100%; height: 10rem; object-fit: contain" />
  </div>
  <div style="float: left; padding-left: 2rem; overflow: auto; width: 70%">
    <p>vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv vhvhvhvvhvhv vhvhv vhvhvh hvhvhv vhvhv hvhvh hhbh hbhb hbhb bhbh hbhb bhbh bhbh bh bhvhv</p>
  </div>
</div>
    
</body>
</html>