Avatar of Panos
Panos
Flag for Germany asked on

Center elements

Hello experts.
I have a parent div. Inside this i have a div with a bg image and a span that is positioned absolute to the child div.
The problem i have is to center the text (span) like the div. (the span is starting exactly in the middle of the parent div and the image is centered exactly to the parent  so that i get the text to the right.
Any help?
<div align="center" class="noresult">
   <div class="mainback noresultimg"></div>
   <span class="noresulttxt">MY text</span>
 </div>

div.noresult{ width:100%;height:150px; position:relative;}
div.noresult div.noresultimg{background-position: -1130px 0px;
    height: 150px;
    width: 126px; 
	margin: 0px auto -1px auto; 
	}
div.noresult span.noresulttxt{ font-size:14px;  
    position:absolute; top:90px;  
	color:#663333;white-space:nowrap; }

Open in new window

CSS

Avatar of undefined
Last Comment
Md Shah

8/22/2022 - Mon
COBOLdinosaur

If I understand what you are asking, then the span need to be inside the div with the background.  If that is not what you are trying to do you will need to be more specific of give us  diagram of what you want.

Cd&
Md Shah

Try changing your code as below..

<div align="center" class="noresult">
       <div class="mainback noresultimg">
            <span class="noresulttxt">MY text</span>
       </div>
</div>

Open in new window


Also change your 'position' style from 'absolute' to 'relative' in 'div.noresult span.noresulttxt' style:

div.noresult span.noresulttxt{ 
            font-size:14px;  
            position:relative;
            top:90px;  
	        color:white;
            white-space:nowrap; 
}

Open in new window

Hope this resolves your issue...

Happy Coding :)
Panos

ASKER
Hi COBOLdinosaur and Md Shah

What i get with my code is attached image screen_2.gif
What i'm getting setting the span in the div with the bg is screen_1.gif
What i need is screen_3.gif

I hope i did help you this time. My description was not very good.
screen-1.gif
screen-2.gif
screen-3.gif
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Md Shah

Thanks for sharing the screenshot.

Did you tried as per the code change I have shared in my earlier comment. If not, please try that once & let me know the status.

Also can you please share the image what you are trying to use as background image for child div; as I want to see if there is no white space indented to its left. Also it will help to provide you the resolution ASAP.

Cheers !
Md Shah

Hi,

I have copied your code snippet from the question and have created below HTML file.

I have made following 3 changes in it:
1) Placed the Text <span> tag inside child <div> tag which has attached background image - 'test.jpg'.
2) Changed the position attribute of <span> tag from 'obsolute' to 'relative'.
3) Removed 'background-position' style attribute from child <div> style.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test HTML Page</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <style type="text/css">
        
        div.noresult{ 
            width:100%;
            height:150px;
            position:relative;
        }

        div.noresult div.noresultimg{
            /* background-position: -1130px 0px; */
            height: 150px;
            width: 126px; 
	        margin: 0px auto -1px auto; 
            background-image: url("images/test.jpg"); /* new image getting downloaded */
            background-repeat:no-repeat; /* To avoid peat of image */
	        }

        div.noresult span.noresulttxt{ 
            font-size:14px;  
            /*position:absolute;*/ 
            position:relative;
            top:90px;  
	        color:#663333;
            white-space:nowrap; 
        }
        
    </style>
</head>
<body>

    <!--<div align="center" class="noresult">
        <div class="mainback noresultimg">
            <span class="noresulttxt">MY text</span>
       </div>-->   

      <div align="center" class="noresult">
        <div class="mainback noresultimg">
            <span class="noresulttxt">MY text</span>
       </div>
    </div>
</body>
</html>

Open in new window


From your screenshots shared, I have created attached 'test.jpg' file which I have used for above HTML code.

With this I have got resultant output as Text Center Aligned to child div background image.

Let me know if you have any issues..

Happy Coding :)
test.jpg
Panos

ASKER
Hi again.

Try to set a width:500px to the parent noresult div
Add a large text into the span (blablablablablablablablablablablabl abl blablablablc)

Attached the result. I can't get centered the text in the parent div
screen_4
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER CERTIFIED SOLUTION
Md Shah

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Panos

ASKER
Thank you again.
 regards panos
Md Shah

Super.. Any time Panos... Thanks to you too for letting me know another option to resolve..
Good Luck for further coding :)