Centering Image and Icon in Semantic-UI card

Developer
Dzulfikar Adi Putra
Size
2,546 Kb
Views
70,840
  1. Centering Image and Icon in Semantic-UI card Previews
  2. Centering Image and Icon in Semantic-UI card HTML Codes
  3. Centering Image and Icon in Semantic-UI card CSS Codes

How do I make an centering image and icon in semantic-ui card?

Centering Image in Semantic-UI card. What is a centering image and icon in semantic-ui card? How do you make a centering image and icon in semantic-ui card? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.

Centering Image and Icon in Semantic-UI card Previews
IQ Test

Centering Image and Icon in Semantic-UI card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Centering Image and Icon in Semantic-UI card</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2 class="ui dividing header">Centering Image in Semantic-UI card</h2>
Reference :
<ul> <li>Horizontal alignment of image<a href="http://jsfiddle.net/marvo/3k3CC/2/">http://jsfiddle.net/marvo/3k3CC/2/</a></li> <li>Vertical alignment of image<a href="http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div">http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div</a></li> <li>Vertical alignment of text<a href="http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css">http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css</a></li>
</ul>
<div class="ui cards"> <div class="ui card"> <div class="image rectangle"> <img src="http://sallyaroundthebay.com/wp-content/uploads/2013/06/duck-Ernst-Vikne-300x300.jpg"> </div> <div class="content"> <a class="header">Rectangle Image</a> <div class="meta"> <span class="date">Joined in 2013</span> </div> <div class="description"> Kristy is an art director living in New York. </div> </div> </div> <div class="ui card"> <div class="image portrait"> <img src="http://www.mossyoak.com/images/blogs---waterfowl/duckacc_ll.jpg"> </div> <div class="content"> <a class="header">Portrait Image</a> <div class="meta"> <span class="date">Joined in 2013</span> </div> <div class="description"> Kristy is an art director living in New York. </div> </div> </div> <div class="ui card"> <div class="image landscape"> <img src="http://www.fws.gov/refuges/news/images/FalcatedDuck1.jpg"> </div> <div class="content"> <a class="header">Landsacpe Image</a> <div class="meta"> <span class="date">Joined in 2013</span> </div> <div class="description"> Kristy is an art director living in New York. </div> </div> </div> <div class="ui card"> <div class="image icon"> <i class="teal huge icon settings"></i> </div> <div class="content"> <a class="header">Icon</a> <div class="meta"> <span class="date">Joined in 2013</span> </div> <div class="description"> Kristy is an art director living in New York. </div> </div> </div>
</div>
</body>
</html>

Centering Image and Icon in Semantic-UI card - Script Codes CSS Codes

body { padding: 40px;
}
.card { width: 200px !important;
}
.card .image { background: black !important; width: 200px; height: 200px;
}
.card .image.icon { text-align: center; line-height: 200px;
}
.card .image.icon i { display: inline-block; vertical-align: middle;
}
.card .image.portrait img { border-radius: 0 !important; height: 200px !important; width: auto !important; margin: auto;
}
.card .image.landscape img { border-radius: 0 !important; position: absolute; top: 0; bottom: 0; margin: auto;
}
Centering Image and Icon in Semantic-UI card - Script Codes
Centering Image and Icon in Semantic-UI card - Script Codes
Home Page Home
Developer Dzulfikar Adi Putra
Username superpikar
Uploaded September 06, 2022
Rating 3
Size 2,546 Kb
Views 70,840
Do you need developer help for Centering Image and Icon in Semantic-UI card?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dzulfikar Adi Putra (superpikar) Script Codes
Name
Image Map
Force Layout JSON Directed Graph using Dot Engine 2, nodes using array of object
Ionic - Wordpress REST API starter
Vue v1 Search and Pagination
JS Tree Example JSON Data
Force Layout Directed Graph using dot engine dagre-d3js library, data from JSON
Ionic Alphabetical List
Bulma breadcrumbs
D3JS Simple JSON SVG barchart vertical
Multiple Expand Collapse
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!