Hi all.
I have a div with a scrollbar, which contains an image:
<div style=" width:15em; height:10em; overflow:scroll ;">
<img src="some.gif"/>
</div>
The image is rather small, it occupies only a small part of the div.
This way the image appears in the top left corner of a div.
I want it to appear in the center of the div.
I tried adding align:center to style, and also adding another div
inside the frst one with style="align:ce nter", but this doesn't work.
Is there a way for div with a scrollbar to position embedded tags
in the center of a div?
Thank you in advance for your help.
Anna 6  46661 
Anna: I have a div with a scrollbar, which contains an image:
<div style=" width:15em; height:10em; overflow:scroll ;">
<img src="some.gif"/>
</div>
The image is rather small, it occupies only a small part of the div.
It's a bit strange that you've set the width of the div in "em"s, when
the only content is an image. The actual size of the div will thus
depend on the font and font size being actually used in display although
there is no actual text in that div. That could be quite another font
and size than you've set in your CSS. If the only content in the div is
an image, then a size in "px" is probably better.
(You must also have an alt attribute in the img.)
This way the image appears in the top left corner of a div.
I want it to appear in the center of the div.
I tried adding align:center to style, and also adding another div
inside the frst one with style="align:ce nter", but this doesn't work.
There is no property "align" in CSS. Try "text-align: center".
--
Bertilo Wennergren <be******@gmx.n et> <http://www.bertilow.co m>
Anna wrote: I want it to appear in the center of the div.
Top centre, bottom centre or middle centre?
If the image is purely decorational (I assume it is because your example
didn't include any alt text) then you could use:
<div style="width:15 em; height:10em; overflow:scroll ;
background: white url(some.gif) no-repeat scroll top center;">
</div>
or
<div style="width:15 em; height:10em; overflow:scroll ;
background: white url(some.gif) no-repeat scroll center center;">
</div>
or
<div style="width:15 em; height:10em; overflow:scroll ;
background: white url(some.gif) no-repeat scroll bottom center;">
</div>
--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132 an**@ubaccess.c om (Anna) wrote in message news:<8e******* *************** ****@posting.go ogle.com>... I want [an image] to appear in the center of the div.
I tried adding align:center to style, [snip] but this doesn't work.
You need to use 'text-align:center' (as images are inline content).
--- Stephen Morley --- http://www.safalra.com
Thanks everybody for the answer.
I can't make the image a background of the div, because it can be not
image,
but some other content inside this scrolled div.
So I've added 'text-align:center' to the style attribute of the div.
Now the image is top centered. But I actually want it middle centered,
and cannot find the right css attribute for that.
vertical-align doesn't work on divs.
So is there any other css attribute that can make this image to be
middle centered in the scrollable div?
Thank you all very much for your help.
Anna us****@safalra. com (Safalra) wrote in message news:<c5******* *************** ****@posting.go ogle.com>... an**@ubaccess.c om (Anna) wrote in message news:<8e******* *************** ****@posting.go ogle.com>... I want [an image] to appear in the center of the div.
I tried adding align:center to style, [snip] but this doesn't work.
You need to use 'text-align:center' (as images are inline content).
--- Stephen Morley ---
http://www.safalra.com
How am I supposed to post my replies in a newsgroup?: http://allmyfaqs.com/faq.pl?How_to_post
Anna wrote: Thanks everybody for the answer.
I can't make the image a background of the div
--
Brian
follow the directions in my address to email me an**@ubaccess.c om (Anna) wrote in message news:<8e******* *************** ****@posting.go ogle.com>... us****@safalra. com (Safalra) wrote in message news:<c5******* *************** ****@posting.go ogle.com>... an**@ubaccess.c om (Anna) wrote in message news:<8e******* *************** ****@posting.go ogle.com>... I want [an image] to appear in the center of the div.
I tried adding align:center to style, [snip] but this doesn't work.
You need to use 'text-align:center' (as images are inline content).
vertical-align doesn't work on divs.
So is there any other css attribute that can make this image to be
middle centered in the scrollable div?
[top posting fixed]
No, but there's a hack involving some extra mark-up, for details see: http://www.wpdfd.com/editorial/wpd0103.htm#toptip
From your posts so far, it seems you are under the impression that CSS
attributes correspond directly to old HTML attributes. This is not so;
I suggest you have a browse of the CSS recommendation: http://www.w3.org/TR/REC-CSS2/
--- Stephen Morley --- http://www.safalra.com This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Bryan R. Meyer |
last post by:
Hello Everyone,
The problem of browser resizing has become an issue for me. While
redesigning my webpage, I set the left and right margins to be auto so
that my content would be centered. However, there are images that I
used absolute positioning in order to place them in the appropriate
location on my page. When I do a browser resize,...
|
by: Mike Anderson |
last post by:
I'm having a problem with the positioning of a div block in IE6.
http://www.uah.edu/Athletics/index.shtml
When the window is resized to a width smaller than the width of the
"body" div (that is, the main content of the page), that content jumps
downward. The content displays properly in Mozilla Firebird 0.6,
creating the necessary...
|
by: Susan |
last post by:
This time I've got a url!
http://www.wmich.edu/ucm/testing/index_pos.htm
1) How can I make the lengths of the white sections (the main area and the
link area on the right) the same length? Do I have to specify pixels or
is there another way around that?
2) In the main section: I'd like to make the text sit to the right of the...
|
by: lilo |
last post by:
Hi,
I'd like to position the scrollbar on the left side of a table cell,
as the navigation buttons are on the right side, and i would like the
scroll bar to be on the opposite side. Any way to do this?
|
by: George Hester |
last post by:
http://tinyurl.com/5uj6w
The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that?
Also the navigation divs both top and bottom should follow the scroll right. Both of these issues occur in IE 6 but not in IE 5.5.
You can get the horizontal scroll bar for the window by increasing the size of...
| | |
by: Geoffrey H. Goldberg |
last post by:
I have made a remote control window which opens from its parent. On
loading, the remote is positioned relative to the screen using
window.moveTo(x,y).
What I would like to happen is the remote control to open docked in a
specific location relative to the parent (opener).
Fortunately, I need this to work ONLY in IE, so at least I don't...
|
by: Eric |
last post by:
I have a page with some ASP.NET controls at the top and a datalist which
might include anything from 1 to 25 elements below them, all laid out
with absolute CSS positioning.
The problem I'm having is that when the datalist goes off the bottom of
the page and adds a scrollbar (which in itself is fine with me), the the
last element of the...
|
by: TheCeej |
last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to...
|
by: LayneMitch |
last post by:
Hello.
After getting great advice on positioning, I've edited my code and it's
looking more stable.
Now I need a little assistance with background image placement.
Please click on this link: www.ibtestsite.info
I've colored the background black and added a background image which is the
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
