All geek questions in one place

Vertical alignment of content when freezing

I have looked through so many articles about Stack, but cannot find the answer to this question.

I am trying to display content when the image freezes. I have done it. But I need it vertically. Some blocks will have several lines. Here I created a JSFiddle: https://jsfiddle.net/wkmepjnk/

Any help would be great! thank you

My html:

<div class="grid-wrapper">

                <div class="grid-single">
                    <img src="images/qdeck-logo.png">
                        <div class="grid-content">
                        <span>
                            <div class="hover-content">
                            <h1>QDeck</h1>
                            <p>Q-Deck® decking or deckboards are available in four standard timber profiles, two anti-slip resistant timber profiles known as Q-Grip® and a composite profile in a range of colours known as Q-Deck Twinson.</p>
                            <div class="hover-button">More Info</div>
                            </div>
                        </span>
                    </div>
                </div>
                <!--Close Grid Single-->


            </div>
            <!--Close Grid Wrapper-->

My CSS:

.grid-wrapper {
    width:100%;
    height:auto;
    background-color:#ffffff;
    -webkit-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
    box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
}

.grid-single {
    width:25%;
    height:auto;
    margin-right:-5px;
    display:inline-block;
    border:1px solid #e0e3e6;
    position: relative;
}

.grid-single h1 {
    font-family: 'montserratlight';
    font-size:25px;
    line-height:30px;
    color:#ffffff;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}

.grid-single img {
    width:100%;
    height:auto;
    margin-bottom:-5px;
}

.grid-single .grid-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #1ABC9C;
    opacity: 0;
    transition: opacity 0.1s;
    text-align:left;
}

.grid-single .grid-content span {
    display: block;
    position:absolute;
    top:10%;
    left:10%;
    width:80%;
    height:auto;
    text-align:center;
}

.grid-single .grid-content span p { 
    font-family: 'montserratlight';
    font-size:14px;
    line-height:21px;
    color:#ffffff;
    margin-bottom:15px;
    letter-spacing:0px;
}

.grid-single .grid-content span p strong {  
    color:#a1cc3a;
    margin-bottom:4px;
}

.grid-single:hover .grid-content {
    opacity: 1;
}

.hover-button {
    display:inline-block;
    width:auto;
    height:40px;
    background-color:#2C3E50;
    padding:0px 20px;

    font-family: 'montserratlight';
    font-size:15px;
    line-height:40px;
    color:#ffffff;

}
+4
source share
5 answers

This range .grid-single .grid-content span, which you want to display vertically, should be top:50%;, and margin-top:-x;with x = half the height of the span.
Just in your case add:

.grid-single h1 {
    margin-top: 0;
}

jdfiddle

0
source

flex justify-content:center; align-items:center;:

.grid-wrapper {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  -webkit-box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
  box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
}
.grid-single {
  width: 25%;
  height: auto;
  margin-right: -5px;
  display: inline-block;
  border: 1px solid #e0e3e6;
  position: relative;
}
.grid-single h1 {
  font-family: 'montserratlight';
  font-size: 25px;
  line-height: 30px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.grid-single img {
  width: 100%;
  height: auto;
  margin-bottom: -5px;
}
.grid-single .grid-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #1ABC9C;
  opacity: 0;
  transition: opacity 0.1s;
  text-align: left;
}
.grid-single .grid-content span p {
  font-family: 'montserratlight';
  font-size: 14px;
  line-height: 21px;
  color: #ffffff;
  margin-bottom: 15px;
  letter-spacing: 0px;
}
.grid-single .grid-content span p strong {
  color: #a1cc3a;
  margin-bottom: 4px;
}
.grid-single:hover .grid-content {
  opacity: 1;
  display: flex;/*add flex*/
  justify-content: center;/*add this*/
  align-items: center;/*add this*/
}
.hover-button {
  display: inline-block;
  width: auto;
  height: 40px;
  background-color: #2C3E50;
  padding: 0px 20px;
  font-family: 'montserratlight';
  font-size: 15px;
  line-height: 40px;
  color: #ffffff;
}
.grid-content span {
  border: solid 1px;
}
<div class="grid-wrapper">
  <div class="grid-single">
    <img src="http://placehold.it/400x400">
    <div class="grid-content"> <span>
			            	<div class="hover-content">
			            	<h1>QDeck</h1>
			            	<div class="hover-button">More Info</div>
			            	</div>
			            </span>

    </div>
  </div>
  <!--Close Grid Single-->
</div>
<!--Close Grid Wrapper-->
Hide result
0

, . , , , . display: table; display: table; cell; vertical-align: middle; .

http://codepen.io/anon/pen/bVzZEL

<div class="wrapper">
  <img src="http://placehold.it/300x200" alt="" />
  <div class="overlay">
    <h3>Great Title</h3>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis totam deleniti.</span>
    <button class="btn btn-primary">View</button>
  </div>
</div>

.wrapper{
  display: table;
  width: 300px;
  height: 200px;
}

.overlay{
  display: none;
  vertical-align: middle;
  width: 300px;
  height: 200px;  
  background: #EEE;
  text-align: center;
}

.overlay .btn{
  margin-top: 5px;
}

.overlay h3{
  margin-top: 0;
}

.wrapper:hover img{
  display: none;
}

.wrapper:hover .overlay{
  display: table-cell;
}
0

.grid-single .grid-content {
    background: #1abc9c none repeat scroll 0 0;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: left;
    top: 0;
    transition: opacity 0.1s ease 0s;
    width: 100%;
}

.grid-single .grid-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 80%;
}
0

.. , , .

, : https://jsfiddle.net/x7s6f9jm/

, div, .

css :

.grid-single .grid-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #1ABC9C;
    opacity: 0;
    transition: opacity 0.1s;
    text-align:left;
}

.grid-single .grid-content span {
    display: table;
    position:absolute;
    left:10%;
    width:80%;
    height:100%;
    text-align:center;
}

.hover-content {
    display:table-cell;
    background-color:#ff6600;
    vertical-align:middle;
}

!

0

Source: https://habr.com/ru/post/1616219/

More articles:


All Articles