Jump to content

Aligning TitleSegment Centered to IMG Tag

IndianaJones

By IndianaJones
in HTML/XHTML

 Share

Recommended Posts

IndianaJones Newbie

IndianaJones

Posted
  • Author
Posted

Sorry for Attaching the file in my Earlier Posting. Below is the CODE. I want to Get that TitleSegment's DIV tag Center Aligned to the IMG Tag. Can you please Tell Me what should I Do? Please help.
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" />

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />


<title>Testing</title>
    <style type="text/css">
    
body {
                margin-top: 0px;
                margin-bottom: 0px;
                /*background-color: #CCFFCC;*/
}

#MainContainer01 {
                width: 620px;
                        margin: 0 auto;
                /*padding: 20px;*/
                /*background: #000000;*/

}
.Header {
                font-family: Arial, Helvetica, sans-serif;
                color: #FFFFFF;
                text-align: center;
                font-size: 25pt;
                background-color: #000080;
                line-height: 75px;
                height: 75px;
}

.HREFNoBorder {
                border-width: 0px;
}
.FL {
                width: 310px;
                height:381px;            
                text-align: center;
                padding-bottom: 30px;
                background-color:fuchsia;
                float: right;
}
.gap {
                line-height: 35px;
                height:35px;
                /*clear: both;*/
                
}
.TitleSegment {
                line-height: 30px;
                font-family: Arial;
                font-size: 12pt;
                background-color: #CCFFFF;
                text-align: right;
                width: 301px;            
}
</style>
</head>

<body>
    <div id="MainContainer01">
         <div class="Header"></div>
         <div class="gap"></div>                  
         <div class="FL">
                        <div class="TitleSegment">INDIA</div><a target="_blank" href="#">
                        <img alt="#" longdesc="#" src="https://post.healthline.com/wp-content/uploads/2020/09/blue-lotus-flower-732x549-thumbnail.jpg" width="301" height="381" class="HREFNoBorder" /></a></div>
         <div class="FL">
                        <div class="TitleSegment">United States of America</div><a target="_blank" href="#">
                        <img alt="#" longdesc="#" src="https://th.bing.com/th/id/OIP.caLpUQWyd1PZV5SRvDOZFQHaE8?w=270&h=180&c=7&o=5&pid=1.7" width="301" height="381" class="HREFNoBorder" /></a></div>                                                                                    
   </div>
</body>
</html>

Link to comment
Share on other sites
IndianaJones Newbie

IndianaJones

Posted
  • Author
Posted
Quote

There is information about centering containers on this page: https://www.w3schools.com/howto/howto_css_center_website.asp

No... No... Not about Centering the Container. I want to Center the Title Segment which is Above the Thumbnails. Like this 👇

1052161962_ScreenSHOTofAnIssuewithTITLEDIV.png.d7eb63d9a6d6919de7ccf4d0de91f485.png

Quote

I recommend upgrading from XHTML Transitional to HTML 5. XHTML was phased out ten years ago.

Thanks for Recommending. So, I have Upgraded like this   👇 now. Is that Correct?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...