Search code examples
htmlcssbordertext-align

HTML script text align/ border


I have to script this HTML. As you can see I coded but it's not the same layout. can someone help me?

The question: enter image description here

And this is my output for it:

enter image description here

The code:

<! DOCTYPE Html>
<html>
<head><title>example2</title></head>
   <body>
   <h3 style="border-style: solid; width: 5%; text-align: top-center; float: center;"> YUCW</h3>
 
      <p style="text-align:left; border-bottom-style: solid;">
    MIS 343
    <span style="float:right;">
       principles of e-commerce
         <p style="text-align:left; border-bottom-style: solid;">
    Name: <i>Riyam</i>
    <span style="float:right;">
       midterm marks 24/25
        
    </span>
</p>

<p style="text-align:left;">
    Specialization : <i > MIS</i>
    <span style="float:right;">
      final marks 32/35
        
    </span>
</p>
   </body>
</html>


Solution

  • There are so many ways you can do this

    <body> 
            <p style="text-align: center;width: 40vw;float: left;margin-left: auto;">
                 <span style="display: block;border-bottom-style: solid;">MIS 343</span><br>
                 <span style="border-bottom-style: solid;display: block;">Name : Riyam</span><br>
                 <span>Specialization : MIS</span>
            </p>
            
            <h3 style="margin: 0;width: 5%;display: flex;justify-content: center;height: 100px;border-style: solid;padding: 0;float: left;align-items: center;"> YUCW</h3>
            
            <p style="text-align: center;width: 40vw;float: left;display: inline;">
                 <span style="display: block;border-bottom-style: solid;">principles of e-commerce</span><br>
                 <span style="display: block;border-bottom-style: solid;">midterm marks 24/25</span><br>
                 <span>final marks 32/35</span>
            </p>     
    </body>