Jump to content

Aligning TitleSegment Centered to IMG Tag


Recommended Posts

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">
<meta http-equiv="Content-Type" />


    <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;
                text-align: center;
                padding-bottom: 30px;
                float: right;
.gap {
                line-height: 35px;
                /*clear: both;*/
.TitleSegment {
                line-height: 30px;
                font-family: Arial;
                font-size: 12pt;
                background-color: #CCFFFF;
                text-align: right;
                width: 301px;            

    <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>                                                                                    

Link to comment
Share on other sites


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 👇



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
  • Create New...