Problems:
We want to keep the content displayed center horizontally in one
container(div, p etc).
Solution:
We can use auto margin to center the element like below.
<div id="container">
<div id="center"><img src="./images/T1qjOGXaRqXXXXXXXX-72-34.png"/></div>
</div>
#container{
width:100%;
}
#center{
margin: 0 auto;/*Put the img at the center of "container"*/
width:100px;
}
http://www.apple.com/support/
use this way to put the header, content and footer at the center.
Extension:
If we want to put content at the center, but with some pixels moved to one direction, we still can use this method with relative position.
<div id="container">
<div id="center"><img src="./images/T1qjOGXaRqXXXXXXXX-72-34.png"/></div>
</div>
#container{
width:100%;
}
#center{
margin: 0 auto;
width:100px;
position:relative;
left:-10px;/* move the position 10 pixels to the left*/
}
An example of this extention would be tiger log in page (our current project)
Related Patterns:
分享到:
相关推荐
藏经阁-Horizontally Scalable Relational Databases with Spark.pdf
Write a microservice with a RESTful API and a database* Understand the common idioms and common patterns in microservices architecture* Leverage tools and automation that helps microservices become ...
藏经阁-Horizontally Scalable Relation
Centering views horizontally with Auto Layout Chapter 44. Elements grayed out on Storyboard after copying Chapter 45. Debugging Core Data Chapter 46. "The package does not contain an Info.plist" ...
Centering views horizontally with Auto Layout Chapter 44. Elements grayed out on Storyboard after copying Chapter 45. Debugging Core Data Chapter 46. "The package does not contain an Info.plist" ...
What you will learnSet up a working development environment and create a ...horizontally scale with a few containers on a single nodeMaster layering isolation and messaging to simplify and harden the ...
What you will learnSet up a working development environment and create a ...horizontally scale with a few containers on a single nodeMaster layering isolation and messaging to simplify and harden the ...
In this work, we propose a novel packaging scheme with horizontally layered QDs-phosphor nanocomposites to obtain an enhanced optical and thermal performance for WLEDs. Three different WLEDs, ...
I have coded an entire chat application using the Spring Framework, WebSocket, Cassandra, Redis, RabbitMQ, and MySQL, and I discuss how you can horizontally scale this application implementing a ...
the most advanced control type of the pack, lets you bind every finger gesture imaginable - for example, single-finger tap can act as a right mouse button click, swiping horizontally with three ...
-flop flop image horizontally -frame geometry surround image with an ornamental border -function name parameters apply function over image values -gamma value level of gamma correction -gaussian...
水稻基因组中通过BLAST同源搜索和系统发育树预测的2878条水平转移基因,郭兴益,王煜,水平基因转移(HGT)现象在许多原核生物中均有报导,对于其适应新的生境有重要意义。有关原核生物DNA转移到高等真核生物核基因...
You have been provided with a third-party library "ChessLib" which calculates the legal moves a knight can make given a position on an 8 by 8 board. The library has been used to create a program which...
published at 2013 ,second editionManage the huMONGOus amount of data collected through your web application with MongoDB. This authoritative introduction—written by a core contributor to the project...
Discover how to design, develop, and maintain your database application effectively with PostgreSQL About This Book Understand how to utilize the most frequently used PostgreSQL ecosystem-related ...
As you deepen your understanding, they guide you through building large, horizontally scalable infrastructures that integrate multiple components in a feature-rich cloud environment. Throughout, you...
After this, you'll learn how to set up replication, use load balancing to scale horizontally, and troubleshoot errors. Finally, you will get acquainted with useful tools available in the PostgreSQL ...
11.Added: the 'Arrange child windows on running queries' option: Tile vertically/horizontally and Cascade 12.Added: an option to scan titles only within the 'Search by RegExp' plugin. 13.Improved: ...