Centre text in a JOptionBox

Can any one tell me how to centre text in the box. The bit i want centred is the "Click on the OK to start".
JOptionPane.showMessageDialog(null,"The game has three rounds loosing a dice at the end of each round."+"\n"+
"You are able to roll the dices agian at the end of each round but only ones"+"\n"+"Click on 'Ok' to start");

You can pass a component rather than a string, so your best bet is to pass a JPanel containing a JLabel per line. Centreing those should be easy.

Similar Messages

Centre text

How do I centre text in within the border of a multiline Dynamic text field?

assign its autoSize property to "center"

Centre text and image side by side.

Hi, I was able to centre two images side by side fine with my old website page but once I changed one of the images into text I cant seem to align them side by side anymore.
Old (image next to image):
http://dkphotos.net/About/About.html
New (text next to image):
http://dkphotos.net/AboutNew/About.html
Any help would be very appreciated.
HTML:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" >
   <link rel="icon" type="image/gif" href="../../animated_favicon1.gif" >
<title>About</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
          <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
          <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
<style>
body,td,th {
              font-family: "josefin-slab";
          font-style: normal;
          font-weight: 400;
          font-size: 15px;
          color: #444444;
/**LINKS**/
a {
font-family: "Josefin Slab";
font-size: 15px;
font-weight:400;
text-decoration:none;
color: #777777;
a:link {
          color: #444444;
          font-style: normal;
          font-weight: 400;
          font-family: josefin-slab;
          font-size: 15px;
a:visited {color: #444444;}
a:hover {color: #60baec;}
a:active {
          color: #444444;
          font-style: normal;
          font-weight: 400;
          font-family: josefin-slab;
          font-size: 15px;
a:focus {color: #60baec;}
ul {
list-style:none;
margin:0;
padding:0;
li {float:right; padding-right: 30px}
body,td,th {
          font-family: josefin-slab;
          font-style: normal;
          font-weight: 400;
          font-size: 15px;
          color: #444444;
abou
p1 {
          font-family:josefin-slab;
          font-style:normal;
          font-weight:400;
          font-size:18px;
          color:#444444;
p2 {
          font-family:josefin-slab;
          font-style:normal;
          font-weight:400;
          font-size:18px;
          color:#444444;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>

<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/josefin-slab:n1,n4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapOverall">
<div class="container" id="headerContainer">
   <div class="header"><a href="../Home/Home.html"><img src="images/Home-Page_03.png" width="448" height="69" class="logo" id="Logo" onMouseOver="MM_swapImage('Logo','','images/home_03-roll-over.png',1)" onMouseOut="MM_swapImgRestore()" alt="Dovydas Kaltanas"/></a></div>
<div class="navMain">
          <div class="navMain">
<ul class="navBar"
    style="width: 530px; float: right; font-weight: 400; font-family: josefin-slab; font-style: normal;">
                    <li><a href="Contact.html">CONTACT</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="../About/About.html">ABOUT</a></li>
                    <li><a href="">PRICING</a></li>
                    <li><a href="../Portfolio/Portfolio.html">PORTFOLIO</a></li>
                    <li><a href="../Home/Home.html">HOME</a></li>
          </ul>
        </div>
</div>
</div>

<div id="Container">
<div id="leftAbout">
<p1>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p1>
                              <p2><br /><a href="../CurriculumVitae.pdf">Curriculum Vitae</a></p2>
</div></p></div>
<p></p>
<p><div id="rightAbout"><img src="images/profile.jpg" width="450" height="736">
<p></p>
</div>

<div id="containerFooter">
<div id="Box1" style="font-family: 'Josefin Slab'">
<p>All content <span style="font-size: 20px">©</span> DKphotos 2013</p>
</div> 
<div id="Box2">
<p><script type="text/javascript">
// BeginOAWidget_Instance_2149022: #OAWidget
          var urlToLike = 'http://www.facebook.com/DKphotos.net';
          if (urlToLike == '') {
            urlToLike = window.location.href;
      urlToLike = encodeURIComponent(urlToLike);
      var font = encodeURIComponent('arial');
document.write ('<iframe src="http://www.facebook.com/widgets/like.php?locale=en_US&href='+urlToLike+'&layout=button_cou nt&show_faces=false&width=450&height=150&action=like&font='+font+'&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; border-color:#ffffff; overflow:hidden; width:450; height:150"></iframe>')
// EndOAWidget_Instance_2149022
</script>
</div>
</div> 

<hr class="clearing" />
</div> 
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body {
          background-image:url(images/bg_body.jpg);
          background-color:#ffffff;
          background-attachment:fixed;
          background-position:top;
.wrapOverall {
          width: 1920px;
          display: inline;
img { border: 0; }
ul.navBar {
margin: 18px 0px 0px 0px;
padding: 0;
white-space: nowrap;
width: 950px;
overflow-x: auto;
display:inline-block;
ul.navBar li {
          display:inline;
.header img.logo{
          float: left;
          margin: 0px 15px 0px 15px;
.container {
          min-width: 1050px;
#Container {
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 0;
width: 900px;
margin:0 auto; /*centered*/
overflow:hidden; /*float containment*/
#Container {
     clear:both;
     width: 100%;
     min-width: 900px;
#left {
          width: 300px;
          min-height: 550px;
          margin-bottom: 200px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
          margin-left: auto;
    margin-right: auto;
#ContentBox1 {
          width: 450px;
          min-height: 550px;
          margin-bottom: 200px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
          margin-left: auto;
    margin-right: auto;
/**Clear floats after the boxes**/
.clearing {
clear:both;
visibility:hidden;
line-height:0;
font-size:1px;
display:block;
#containerFooter {
width: 100%;
min-width: 650px;
max-width: 100%;
color:#444444;
font-style:normal;
font-weight:400;
font-family:josefin-slab;
font-size:15px;
text-decoration:none;
#containerFooter {
font-family:josefin-slab;
border: 0;
margin:0 auto; /*centered*/
overflow:hidden; /*float containment*/
#Box1, #Box2 {
          width: auto;
          min-height: 10px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
#Box1 {margin-left: 8px; float: left;}
#Box2 {margin-left: 20px; float: left;}
/**Clear floats after the boxes**/
.clearing {
clear:both;
visibility:hidden;
line-height:0;
font-size:1px;
display:block;
          #containerFooter {
                    width:100%;
                    float:left;
                    #containerFooter {
          position: fixed;
          bottom: -145px;
          z-index: 500;
          background-color: #FFF;

Overall width of the website is 1920px???? That's way too wide.
Anyways you would need to 'float' the leftAbout and rightAbout containers if you want the text to be to the left of the image:
#headerContainer {
    overflow: hidden;
#leftAbout {
    float: left;
    width: 400px;
#rightAbout {
    float: left;
    width: 450px;
#containerFooter {
    clear: both;
I'll leave you to ajdust the width of the text container - leftAbout

Centre text in a "region"

Howdy,
Forgive my ignorance, I'm jus' a simple compooder pwogrammer.
How do you paint some text centred in a jPanel (for instance).
What I can't figure out is how to get the font height, and the width of this string... paintComponent takes a Graphics object right... and that graphics has a current Font, right... so How do I get the height of the font (as user scale), and the width of a given string as it appears in that font (in user scale)?
I've been lost in the API doco for about for about an hour, and I think I'm gonna cry ;-)
It took me 15 minutes to work out the the Graphics passed in isa Graphics2D FFS!
Cheers, Keith.

Keith, if using a JTextPane suits your purpose, you can center-align the text via methods of the StyledDocument and StyleConstants classes. This is a (slightly modified) code I posted on another thread some time ago.import javax.swing.JFrame;
import javax.swing.JTextPane;
import javax.swing.text.BadLocationException;
import javax.swing.text.Style;
import javax.swing.text.StyleConstants;
import javax.swing.text.StyleContext;
import javax.swing.text.StyledDocument;
public class TestAlignment {
    JTextPane textPane;
    public void createEverything (){
        textPane=new JTextPane ();
        StyledDocument doc = textPane.getStyledDocument ();
        addStylesToDocument (doc);
        // Doesn't work if you comment the next line
        textPane.setLogicalStyle (doc.getStyle ("bold"));
        try{
            doc.insertString (doc.getLength (),
                    "Keith Corlett",
                    doc.getStyle ("bold"));
        } catch (BadLocationException ble) {
            ble.printStackTrace ();
        JFrame frame=new JFrame ();
        frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
        frame.add (textPane);
        frame.setSize (400,300);
        frame.setVisible (true);
    protected void addStylesToDocument (StyledDocument doc) {
        Style def=new StyleContext ().getStyle (StyleContext.DEFAULT_STYLE);
        Style heading = doc.addStyle ("bold", null);
        StyleConstants.setFontFamily (heading, "SansSerif");
        StyleConstants.setBold (heading, true);
        StyleConstants.setFontSize (heading,30);
        StyleConstants.setAlignment (heading, StyleConstants.ALIGN_CENTER);
        StyleConstants.setSpaceAbove (heading, 10);
        StyleConstants.setSpaceBelow (heading, 10);
    public static void main (String args[]){
        TestAlignment pane=new TestAlignment ();
        pane.createEverything ();
}For painting text centered on any Component, with word wrap when the width does not permit displaying the text in one line, the TextLayout class is useful. Here's an example, resize the frame narrower than the text to see it in action:import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.font.FontRenderContext;
import java.awt.font.LineBreakMeasurer;
import java.awt.font.TextAttribute;
import java.awt.font.TextLayout;
import java.text.AttributedString;
import java.util.ArrayList;
import javax.swing.JComponent;
import javax.swing.JFrame;
public class LineBreak extends JComponent {
    Font font = new Font ("TimesRoman", Font.PLAIN, 14);
    String breakText;
    ArrayList<TextLayout> layouts = new ArrayList<TextLayout> ();
    public LineBreak (String inText) {
        breakText = inText;
    public void breakLines (FontMetrics metrics) {
        if (0 < breakText.length ()) {
            final AttributedString attStr = new AttributedString (breakText);
            attStr.addAttribute (TextAttribute.FONT, font);
            final LineBreakMeasurer measurer =
                    new LineBreakMeasurer (attStr.getIterator (),
                    new FontRenderContext (null, true, true));
            TextLayout layout;
            while (null != (layout = measurer.nextLayout (getWidth ()))) {
                layouts.add (layout);
    @Override
    public void paintComponent (Graphics g) {
        Graphics2D g2 = (Graphics2D) g;
        FontMetrics metrics = g2.getFontMetrics (font);
        layouts.clear ();
        breakLines (metrics);
        int textHeight = metrics.getHeight ();
        int top = textHeight;
        for (TextLayout layout : layouts) {
            layout.draw (g2, (float) (getWidth() - layout.getBounds ().getWidth ()) / 2, top);
            top += textHeight;
    public static void main (String[] args) {
        String inText;
        if (args.length > 0) {
            inText = args [0];
        } else {
            inText = "Keith likes sweets. Most of all, Keith likes icecream and chocolate.";
        JFrame frame = new JFrame ("Test Frame");
        frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
        frame.setSize (400, 200);
        frame.setLocationRelativeTo (null);
        frame.add (new LineBreak (inText));
        frame.setVisible (true);
}Yup... this one too is slightly modified from something I posted on another thread ;-)
cheers, db

Vertically centring text

I'm looking to vertically centre some text in a dynamic text
field... is that possible, and if so, could anyone help me work it
out?
Thanks in anticipation.
Andy
(Also posted under General Discussion)

I'd see two ways to solve it, the first would be to determin
the height of the text in the text field and than place the
textfield on the position inside the graphical field accordingly.
the second would be to determin the number of line your text
has in the tecxtfield (scroll properties, a bit tricky) and add te
appropriate number of empty lines a the start of the string.

How to centre text?

I have a simple program - which works - but would appreciate any help on how I might change the colour of the text which appears in the text (not on the click button) and how I might centre the text. Is left justified a default value?
Many thanks for any help
import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.event.*;
import javax.swing.*;
class SwingUI extends JFrame
implements ActionListener {
JLabel text, clicked;
JButton button, clickButton;
JPanel panel;
private boolean _clickMeMode = true;
SwingUI(){ //Begin Constructor
text = new JLabel("I'm a Simple Program");
button = new JButton("Click Steve");
button.addActionListener(this);
panel = new JPanel();
panel.setLayout(new BorderLayout());
panel.setBackground(Color.white);
getContentPane().add(panel);
panel.add(BorderLayout.CENTER, text);
panel.add(BorderLayout.SOUTH, button); } //End Constructor
public void actionPerformed(ActionEvent event){
Object source = event.getSource();
if (_clickMeMode) {
text.setText("Steve Clicked");
button.setText("Click Again");
_clickMeMode = false; }
else {
text.setText("Am I a Simple Program?");
button.setText("Click Don!");
_clickMeMode = true;
public static void main(String[] args){
SwingUI frame = new SwingUI();
frame.setTitle("Example");
WindowListener l = new WindowAdapter() {
public void windowClosing(WindowEvent e) {
System.exit(0);
frame.addWindowListener(l);
frame.pack();
frame.setVisible(true);
}

It's in the documentation.
use:
text.setForeground(fg);
text.setHorizontalAlignment(SwingConstants.CENTER);where fg is an object of type color.Hello
Many thanks for your reply. I'm grateful. I am only new to this, so a lot of it is just hit and miss at the moment. For instance I copied and pasted what you proposed and it never worked. I wasn't sure if I had pasted it in the right place. Then I typed in color.blue (where your fg was) and it still didn't work. So I then tried Color.blue (Color is easy for us to make mistakes with because we would use colour or Colour, normally - I'm from the UK), and hey presto! And the text was centred!
You mention documentation. If I digested that, maybe I could stop bothering people like yourself! Is it the normal JDK documentation?
Anyway, many thanks again - I feel as if I've learnt something tonight.
Best wishes

Paint type application for centred text

Looking for the above as I am creating a jpeg and want to add text and be able to control where that text is on the jpeg.
Tried Paintbrush 1.2 but it is not easy to control the text.
Anyone any suggestions..... looking for freeware application ( or something I already have within Mac OSX and didn't realise ! )

I use Preview to do it.
First, add the Annotate tools to the Tool Bar:
View > Customize Tool Bar
Add the Annotate tools
Second, click and hold on the Annotate Tool in the Tool Bar until you see the Note Tool.
Click on the Note tool.
Use the mouse to draw a rectangle in the picture.
You will see the word "text" centered in the rectangle.
Select the word text and type what you need.
You can choose fonts and colors.
Good luck.
Roberto

Tabs not working as expected with centred text

Hi,
I'm trying to make a contents page in Indesign but having trouble with aligning the text correctly.
I want the page titles to be centered but when I select the paragraph style onto centered the text moves away from the Tab stop keeping it in the right place - - the result of this is each page title in the column is in a slightly different place. If I leave the paragraph style on left align the page title stays by the tab stop where I expect it to but I don't like how it looks!
Note in the examples below how in the centered example the S has moved over to the right away from the Tab stop.
Any suggestions?
Many thanks,
Adrian
E.g. left aligned
e.g. 2 centered

My first thought is that tabs don't mix well with centered text and you should use one or more fixed-width spaces between the number and the title, but I'm not really sure what look you want.

How to align text to another text box

I am very new to Indesign and I am signed up to Lynda.com so watching few a lot of tutorials, that said I need help with aligning text.
I have a text box that is 100mm across. It has text centered. "£5"
then above this I have in a smaller font saying "from"
from
£5
I need to get the "f" of from to line up with the beginning of the £ sign? So that If I change the price to £500 the from sticks to the "£" Sign.
To explain again the from needs to align to the left of the centred text.?
Hope that make sense?
Matt

This can be done by putting the "from" text into a custom positioned anchored object just before the £ sign. You'll need to set the X coordinate relative to the anchor, and adjust the offset on both x and y to get the positioning where you want it.
I'm sure there are lessons on Anchored Objects on Lynda.com.

Append report text.vi

Hi all,
Is there a way to amend this vi so that it will centre text or perhaps invent a new one?
I would greatly appreciate it as i need to centre alot of text on the page i print and can find no easy way to do it
Its just a standard report not an excel or word
Thanks
Mike
Message Edited by MikeW1973 on 03-11-2008 12:08 PM

You can certainly open the Append Report Text vi and modify it as you please. You should rename it though. If you ever re-install the report generation toolkit, it would overwrite your changes if you didn't rename it. However, I don't know how you would go about centering the lines you want to append. Perhaps counting the number of characters in the line to determine the number of blank spaces needed to be inserted in order to center the line.
- tbob
Inventor of the WORM Global

Employees has the same cost center long text as the previous record

Hiiii Experts,
in ABAP-HR 2 employees have got the same cost centr text (kostl) with different perner.we shouldnt get the same cost centres long text for diff pernr(employee numbers). please solve this.
thanks and regards,
Vishal

Employee 01605429 has the same cost center long text as the previous record.
01605304;A;MIKE.GESSLERMichael;Gessler;19000101;0500192745;;NUSA;NUSA SLS Solon Prepared Foods Sales;CD SOLON HQ
01605429;A;DANA.SHERMAN;Dana;Sherman;19000101;0500193070;;NBSNA;NBS Solon Employee HR Services;CD SOLON HQ
There are records in the file with no const center which should not be included in the file. We need to know why they were extracted and why
don't they have a cost center. See below.
10252768;A;CHARISSA.HALFORD1Charissa;Halford;19000101;;;NPFC;;
10252770;A;MATTHEW.CANADAY1;Matthew;Canaday;19000101;;;NPFC;;

I cant centre my work in Dreamweaver!

Basically my son is creating a website he has completed the home page and is now ready to begin on all the other pages he needs to complete the website. When he was about to start another page he decided to 'preview' his work only to find that It wasnt completely centre. I have tried everything including pressing ctrl 'a' and then pressing the centre tool but it just doesnt change :@
Here is the a picture of the proposed website below but as you can see it is slightly towards the left, is there anyway possible that he can make it all centred?
If anyone could offer some advice I would be truly grateful!!!
Dave Nelson

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #333333;
.Centre {
text-align: center;
body,td,th {
color: #CCC;
.Centre {
text-align: center;
.Centre {
text-align: center;
.Centre table {
text-align: right;
.Centre {
text-align: justify;
.Centre {
text-align: right;
.Centre {
text-align: left;
</style>
</head><body class="Centre">
<table width="1092" height="130" border="0">
<tr>
    <td width="347" height="126"><p> </p>
    <p> </p>
    <p> </p></td>
    <td width="340" height="126"><img src="KC Irving website/Logo for KC Irving Ltd.jpg" width="340" height="124" /></td>
    <td width="391" height="126"> </td>
</tr>
</table>
<table width="1092" border="0">
<tr>
    <td width="359" height="135"> </td>
    <td width="723"><img src="KC Irving website/Toolbar.jpg" width="735" height="150" /></td>
</tr>
</table>
<table width="1092" border="0">
<tr>
    <td width="347" height="475"> </td>
    <td width="735"><img src="KC Irving website/IMG_1632 (2).jpg" width="736" height="456" /></td>
</tr>
</table>
<table width="1092" border="0">
<tr>
    <td width="346"> </td>
    <td width="736"><img src="KC Irving website/Copyright Bar.jpg" width="735" height="89" /></td>
</tr>
</table>
<p> </p>
</body>
</html>

Profit Center Master Data text

HI All,
I have a few problems regarding the master data text for 0profit_ctr.
Our company has uploaded quite alot of historical data ( not my idea) to its master data.
The problem is that for each Profit center record we have two lines in 0profit_ctr, both with a different set of FROM and TO dates.
Only one of these records are we interested in and thats the one with To date of 31.12.9999.
What I want to do is for the system to upload the Text field of the profit centre regardless of the dates involved, at present the old record has no profit centre text and this is the record the reports are reading.
The system is only picking up the text record for the active profit centre.
I have tried deleting the from and To dates for 0profit_ctr_text but still the load fails.
Any ideas?
Thanks

Is it a time dependent master data? Then you will not be able to delete the From and To Date.
If you are not interested in the validity of a profit center, You have to make it time independent.
Also when you say it loads Text..Where are you trying to Load. If you are trying to Update using a Routine/Code, Then while reading the master data, You can delete the records having Text as blank and then update to the Target Field.
Thanks
Sachin

Image hover effects with centred title

Hi All,
I would like to add to my images a nice slick looking image overlay which has the title of the product in the middle. Can anyone point me in the direction of a good one please. I have searched for a while now and cannot find one which has a vertically centred text in the middle of it.
Any help would be greatly appreciated!
Thank you.
Alex

Alex_roo wrote:
Sorry another quick question. Can this be made to fit with a responsive design. I have just tried width and heights to auto but that doesn't work. Thanks again.
Here's a quick tweak of Jons code.........still have to play around with vertically centering the text at various media query breaks, but it's responsive.
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Fade In Info</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
font-size: 17px;
img {
max-width: 100%;
height: auto;
#wrapper {
width: 88%;
margin: auto;
overflow: hidden;
.content {
float: left;
width: 46%;
position:relative;
margin: 0 2% 0 2%;
.content p {
opacity: 0;
.fade{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align:center;
vertical-align: middle;
color:rgba(0,0,0,0);
-webkit-transition: all 500ms;
transition:all 500ms;
.fade p {
margin-top: 48%;
color: #fff;
.content:hover .fade {
background-color:rgba(0, 0, 0, .35);
color:rgba(0,0,0,1);
opacity: 1;
.content:hover .fade p {
opacity: 1;
@media screen and (max-width: 500px)
.fade p {
margin-top: 42%;
@media screen and (max-width: 480px)
.fade p {
margin-top: 48%;
.content {
float: none;
width: 100%;
margin: 0 0 15px 0;
</style>
</head>
<body>
<div id="wrapper">
<div class="content">
<img src="woman_face.jpg" style="display: block;">
<div class="fade"><p>Some text or whatever</p></div>
</div>

<div class="content">
<img src="woman_face.jpg" style="display: block;">
<div class="fade"><p>Some text or whatever</p></div>
</div>

</div>

</body>
</html>

Design Canvas & Centering text

Forgive me for being a noob here but I have a couple of questions :-
1.) How do I undock the design canvas so I can use it full screen ? At the moment, everything will only snap to the grid that is the displayed part of the design canvas - not the whole screen.
2.) How do I centre text on the screen for instance a heading ? I've used 'text-align: center' but that of course just justifies in the output text box - not the screen.
SPG

(1) At the moment there's no way to do that with a single gesture, but we're merging the NetBeans 4.0 window manager so in the future that will be easy.
For now, you can click on the "pushpin"-like icon near the top of the properties and project navigator window to cause them to slide out to the right.
(2) To get centering like this, don't use absolute positioning. Here's what you can do: go to the Source tab, and add something like this (under body or form depending on where you want it):
<p style="text-align: center"> Hello World! </p>
(or use h1, h2, ... instead of p.) Output Text renders a span which is an inline tag, so you can't set the text-align directly on it. If you want to use an output text (for example to value bind it), you can first add an output text (but DON'T absolute position it: either double click on the output text item in the palette, or drop it and then go remove its position, left and top properties from the style property of the output text). Then go to the source tab, locate the h:outputText you've dropped, and add a <p style="text-align: center"> right before it and </p> right after it, e.g. "wrap the output text with a p block tag).
Hope that helps.
-- Tor
http://blogs.sun.com/tor

Centre text in a JOptionBox

Similar Messages

Maybe you are looking for