Link to home
Start Free TrialLog in
Avatar of Panos
PanosFlag 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

Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

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&
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 :)
Avatar of 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
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 !
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
Avatar of 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
User generated image
ASKER CERTIFIED SOLUTION
Avatar of Md Shah
Md Shah
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Panos

ASKER

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