登录 | 注册 | FAQ
Anonymous

Align/center printable text

+ 发表回复

6 篇帖子 分页: 1 / 1


Align/center printable text

katamail » 周三 9月 24, 2014 10:27 am

Hi!

I'm having a problem when printing a text area on my homepage, text will appear to the right of the A4-paper and I'm not able to figure out how to center it.
what do I need to do for the text to appear at the center of the printing page?




Here is the HTML:

<div id="printable">

<---printable area--->

</div>


and here is the CSS:


@media print {
body * {
visibility:hidden;
}
#printable, #printable * {
visibility:visible;
}
#printable { /* aligning the printable area */
position:absolute;
left:40;
top:40;
}
}



Thanks in advance for any help

Max

最后由 katamail 编辑于 周四 9月 25, 2014 8:28 am,总共编辑了 1 次

头像

katamail

  • 帖子: 6
  • 注册: 周日 9月 21, 2014 2:00 pm

Re: Align/center printable text

XainPro » 周三 9月 24, 2014 11:25 am

<style type="text/css" media="print">
<!--css code goes here-->
</style>
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: Align/center printable text

katamail » 周三 9月 24, 2014 11:34 am

It din't work, but thanks for the anwser
头像

katamail

  • 帖子: 6
  • 注册: 周日 9月 21, 2014 2:00 pm

Re: Align/center printable text

XainPro » 周三 9月 24, 2014 11:40 am

its working here is my complete code


代码: 全选
<html>
<head>
<style>
#printable { visibility:hidden; }
@media print {
#printable {
visibility:visible;
position:absolute;
left:40;
top:40;
}
#printable { /* aligning the printable area */

}
}
</style>
</head>
<body>
<div id="printable">
ABC
</div>


</body>

</html>
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: Align/center printable text

katamail » 周三 9月 24, 2014 2:19 pm

I tried to put your code:


<style>
#printable { visibility:hidden; }
@media print {
#printable {
visibility:visible;
position:absolute;
left:40;
top:40;
}
#printable { /* aligning the printable area */

}
}
</style>


in between the <head> and:


<div id="printable">

<---textarea--->

</div>


in the textarea, but the text desappeared and pictures repositioned on the top of the webpage

Thanks but it didn't work out for me

Cheers
Max
头像

katamail

  • 帖子: 6
  • 注册: 周日 9月 21, 2014 2:00 pm

Re: Align/center printable text

XainPro » 周四 9月 25, 2014 12:52 pm

the text disappear that what is done in this code means it works.
check it's print preview and the text will appear in print preview
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm


+ 发表回复

分页: 1 / 1